React向组件内部动态传入带内容的结构

组件内部动态传入带内容的结构"/>

React向组件内部动态传入带内容的结构

• 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;
  }

  运行结果：