React Render Props

Узнайте, как Render Props может помочь вам создать приложение 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> )

Однако здесь есть проблема: состояние родительского компонента недоступно для дочерних элементов.

Чтобы иметь возможность делиться состоянием, вам необходимо использовать компонент опоры рендеринга, и вместо передачи компонентов в качестве дочерних компонентов родительского компонента вы передаете функцию, которую затем выполняете в{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, который имеет очень конкретное значение, вы можете использовать любую опору, поэтому вы можете использовать этот шаблон несколько раз для одного и того же компонента:

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

Скачать мою бесплатнуюСправочник по React


Больше руководств по реакции: