反应渲染道具

了解渲染道具如何帮助您构建React应用程序

在组件之间共享状态的常见模式是使用children支柱。

在组件JSX中,您可以渲染{this.props.children}它会自动将在父组件中传递的所有JSX注入为子组件:

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      /*...*/
    }
  }

render() { return <div>{this.props.children}</div> } }

const Children1 = () => {}

const Children2 = () => {}

const App = () => ( <Parent> <Children1 /> <Children2 /> </Parent> )

但是,这里存在一个问题:无法从子级访问父级组件的状态。

为了能够共享状态,您需要使用render prop组件,而不是将组件作为父组件的子代传递,而是传递一个函数,然后在其中执行{this.props.children()}。该函数可以接受参数:

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { name: 'Flavio' }
  }

render() { return <div>{this.props.children(this.state.name)}</div> } }

const Children1 = props => { return <p>{props.name}</p> }

const App = () => <Parent>{name => <Children1 name={name} />}</Parent>

而不是使用childrenprop,它具有非常特殊的含义,您可以使用任何prop,因此可以在同一组件上多次使用此模式:

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { name: 'Flavio', age: 35 }
  }

render() { return ( <div> <p>Test</p> {this.props.someprop1(this.state.name)} {this.props.someprop2(this.state.age)} </div> ) } }

const Children1 = props => { return <p>{props.name}</p> }

const Children2 = props => { return <p>{props.age}</p> }

const App = () => ( <Parent someprop1={name => <Children1 name={name} />} someprop2={age => <Children2 age={age} />} /> )

ReactDOM.render(<App />, document.getElementById(‘app’))

免费下载我的反应手册


更多反应教程: