如何传递父级状态以在子组件中使用？

Question

我有一个父组件，我在其中循环遍历数组并将 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}
 />

Answer 1

处理您最后的评论。如果你传递了一个函数作为 HeadingDropdown 中的道具，你可以用它把它 state-value 传回父级。

父项中定义的函数

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

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

   }

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

现在您的父组件 set-up 从 HeadingDropdown 使用 state-value。

现在我们需要将 HeadingDropdown 配置为在单击后实际向上传递该值。

在 HeadingComponent 中，我们只需要更新你的 changeView 方法来调用我们传递下来的 prop，在设置状态之后。我们通过利用 this.setState() 的第二个参数来做到这一点，它是 call-back.

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

如何传递父级状态以在子组件中使用？

How can I pass a parent's state to be used within a child component?

javascript

frontend

reactjs

react-native

react-props