两个特殊的props：children和render

richest_qi

已于 2022-06-06 15:44:21 修改

阅读量200

点赞数

分类专栏： React17/18 文章标签： props children render

于 2022-06-06 15:43:19 首次发布

本文链接：https://blog.csdn.net/qzw752890913/article/details/125147753

版权

React17/18 专栏收录该内容

67 篇文章 4 订阅

订阅专栏

文章目录

基础样例
使用props：children
使用props：render
使用props：render，且传递参数

基础样例

新建react项目，主要包含以下文件：

模板文件index.html
入口文件index.js
入口组件App.js
component/Demo/index.jsx、components/Demo/index.css，即Demo组件

在这里插入图片描述

模板文件index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PuerComponent</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

入口文件index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";

ReactDOM.render(<App/>,document.getElementById("root"));

入口组件App.js

import React, { Component } from 'react'
import Demo from "./components/Demo"

export default class App extends Component {
  render() {
    return (
      <div>
          <Demo/>
      </div>
    )
  }
}

Demo组件

Demo/index.css

.a{
    width: 500px;
    background: orange;
    padding: 10px;
}
.b{
    background: skyblue;
    padding: 10px;
}
.c{
    background: lightgray;
    padding: 10px;
}

Demo/index.jsx

import React, { Component } from 'react'
import "./index.css";

export default class A extends Component {
  render() {
    return (
      <div className="a">
        <div>我是组件A</div>
        <B/>
      </div>
    )
  }
}

class B extends Component{
  render(){
    return (
      <div className="b">
        <div>我是组件B</div>
        <C/>
      </div>
    )
  }
}

class C extends Component{
  render(){
    return (
      <div className="c">
        <div>我是C组件</div>
      </div>
    )
  }
}

使用props：children

代码变更涉及的文件：components/Demo/index.jsx。

import React, { Component } from 'react'
import "./index.css";

export default class A extends Component {
  render() {
    return (
      <div className="a">
        <div>我是组件A</div>
        <B>
          <C/>
        </B>
      </div>
    )
  }
}

class B extends Component{
  render(){
    return (
      <div className="b">
        <div>我是组件B</div>
        {this.props.children}
      </div>
    )
  }
}

class C extends Component{
  render(){
    return (
      <div className="c">
        <div>我是C组件</div>
      </div>
    )
  }
}

注意两点：

<B><C/></B>
{this.props.children}

使用props：render

import React, { Component } from 'react'
import "./index.css";

export default class A extends Component {
  render() {
    return (
      <div className="a">
        <div>我是组件A</div>
        <B render={() => <C/>}/>
      </div>
    )
  }
}

class B extends Component{
  render(){
    return (
      <div className="b">
        <div>我是组件B</div>
        {this.props.render()}
      </div>
    )
  }
}

class C extends Component{
  render(){
    return (
      <div className="c">
        <div>我是C组件</div>
      </div>
    )
  }
}

注意两点：

<B render={() => <C/>}/>
{this.props.render()}

使用props：render，且传递参数

如果B组件（父组件）需要向C组件（子组件）传递数据，如下：

import React, { Component } from 'react'
import "./index.css";

export default class A extends Component {
  render() {
    return (
      <div className="a">
        <div>我是组件A</div>
        <B render={(username) => <C username={username}/>}/>
      </div>
    )
  }
}

class B extends Component{
  state = {
    username:"张三"
  }
  render(){
    const {username} = this.state;
    return (
      <div className="b">
        <div>我是组件B</div>
        <div>我的username是{username}</div>
        {this.props.render(username)}
      </div>
    )
  }
}

class C extends Component{
  render(){
    return (
      <div className="c">
        <div>我是C组件</div>
        <div>接收到的username是{this.props.username}</div>
      </div>
    )
  }
}