react 渲染道具_React渲染道具

react 渲染道具

A common pattern used to share state between components is to use the children prop.

用于在组件之间共享状态的常见模式是使用children道具。

Inside a component JSX you can render {this.props.children} which automatically injects any JSX passed in the parent component as a 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>
)

However, there is a problem here: the state of the parent component cannot be accessed from the children.

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

To be able to share the state, you need to use a render prop component, and instead of passing components as children of the parent component, you pass a function which you then execute in {this.props.children()}. The function can accept arguments, :

为了能够共享状态，您需要使用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>

Instead of using the children prop, which has a very specific meaning, you can use any prop, and so you can use this pattern multiple times on the same component:

您可以使用任何道具，而不是使用具有特殊含义的children道具，因此可以在同一组件上多次使用此模式：

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'))

翻译自: https://flaviocopes.com/react-render-props/

react 渲染道具