Реагировать На Рендеринг Реквизита

Общим шаблоном, используемым для совместного использования состояния между компонентами, является использование дочерних реквизитов.

Внутри компонента JSX вы можете отобразить {this.props.children} , который автоматически вставляет любой JSX, переданный в родительский компонент в качестве дочернего:

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

  render() {
    return {this.props.children}
  }
}

const Children1 = () => {}

const Children2 = () => {}

const App = () => (
  
    
    
  
)

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

Чтобы иметь возможность совместно использовать состояние, вам необходимо использовать компонент поддержки визуализации, и вместо передачи компонентов в качестве дочерних элементов родительского компонента вы передаете функцию, которую затем выполняете в {this.props.children()} . Функция может принимать аргументы,:

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

  render() {
    return {this.props.children(this.state.name)}
  }
}

const Children1 = props => {
  return {props.name}
}

const App = () => {name => }

Вместо использования дочерней опоры, которая имеет очень специфическое значение, вы можете использовать любую опору, и поэтому вы можете использовать этот шаблон несколько раз для одного и того же компонента:

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

  render() {
    return (
      
        Test
        {this.props.someprop1(this.state.name)}
        {this.props.someprop2(this.state.age)}
      
    )
  }
}

const Children1 = props => {
  return {props.name}
}

const Children2 = props => {
  return {props.age}
}

const App = () => (
   }
    someprop2={age => }
  />
)

ReactDOM.render(, document.getElementById('app'))

Оригинал: “https://flaviocopes.com/react-render-props/”

Читайте ещё по теме: