Как я могу передать состояние родителя для использования в дочернем компоненте? - PullRequest
0 голосов
/ 18 мая 2019

У меня есть родительский компонент, где я циклически перебираю массив и устанавливаю состояние для clicked равным id идентифицируемого элемента в массиве.

Я использую этот компонент в другом месте, где янеобходимо получить доступ к этому состоянию.Как я могу передать это состояние?

Вот мой цикл:

{
 filteredArray.map(link => {
  return (
   <div
   key={link.id}
   role="button"
   style={{paddingBottom: 20}}
   onClick={this.changeView(link.id)}
   onKeyPress={() => {}}
   tabIndex={0}
  >
  <Paragraph size="large">
    <a className='heading__dropdown__link'>
     {link.label}
    </a>
  </Paragraph>
 </div>
)
})
}

Вот моя функция, где я устанавливаю состояние для clicked

  changeView(id) {
    return (
      () => this.setState({clicked: id})
    )
  }

А вот где я использую вышеупомянутый компонент: Как я могу использовать вышеуказанное состояние здесь?

 <HeadingDropdown
  expandedTitle="Change view"
  links={links}
  heading={currentLocation}
 />

1 Ответ

2 голосов
/ 18 мая 2019

Отработка вашего последнего комментария. Если вы передали функцию, которая будет использоваться в качестве опоры в HeadingDropdown, вы можете использовать ее, чтобы передать обратно значение состояния Родителю.

Функция, определенная в Parent

class Parent extends React.Component{
   state = {
     headingDropdownvalues: {}
   }

   getHeadingDropdownState = (valueFromChild) => {
      this.setState({
         headingDropdownvalues: valueFromChild
      })

   }

   render(){
      <HeadingDropdown passupstate={this.getHeadingDropdownState}/>
   }
}

Итак, теперь ваш родительский компонент настроен на использование значения состояния из HeadingDropdown.

Теперь нам нужно настроить HeadingDropdown для фактической передачи этого значения после нажатия.

В HeadingComponent нам просто нужно обновить ваш метод changeView, чтобы он вызывал опору, которую мы передали, после того, как состояние было установлено. Мы делаем это, используя второй аргумент this.setState(), который является обратным вызовом.

changeView(id) {
    return (
      () => this.setState({
        clicked: id
      }, () => this.props.passupstate(this.state)) //right here you can pass in whatever you want
    )
  }

Также здесь есть песочница, чтобы вы могли увидеть, как она работает: https://codesandbox.io/s/jovial-thompson-ldg3n

...