children props：通过组件标签体传入结构

<A><B>xxx</B>
</A>
{this.props.children}

render props：通过组件标签属性传入结构，一般用render函数属性

<A render={data=> <C data={data}></C>}></A>
//A组件：
{this.props.render(内部state数据)}
//C组件：读取A组件传入的数据显示
{this.props.data}

案例

import React, { Component } from 'react'
import './index.css'export default class Parent extends Component {render() {return (<div className='parent'><h4>Parent组件</h4><A render={(name) => <B name={name}></B> }></A></div>)}
}class A extends Component {state = {name:'sun'}render() {return (<div className='A'><h4>A组件</h4>{/* {this.props.children} */}{this.props.render(this.state.name)}</div>)}
}class B extends Component {render() {return (<div className='B'><h4>B组件</h4><div>B组件收到的name为：{this.props.name}</div></div>)}
}

样式文件：

.parent{width: 500px;background-color: greenyellow;padding: 20px;
}.A{width: 90%;background-color: skyblue;padding: 20px;
}.B{width: 90%;background-color: slateblue;padding: 20px;
}

运行结果：