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

debugcn 发表于 Dev

奥兹格·科基亚萨

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

很酷的家伙

处理你的最后一条评论。如果您在 HeadingDropdown 中传递了一个用作道具的函数，您可以使用它来将它的状态值传递回父级。

Parent 中定义的函数

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

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

   }

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

所以现在您的父组件已设置为使用 HeadingDropdown 中的状态值。

现在我们需要配置 HeadingDropdown 以在单击后实际传递该值。

在 HeadingComponent 中，我们只需要更新您的 changeView 方法以在设置状态后调用我们传递的 prop。我们通过使用第二个参数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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。