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中传递了要用作道具的函数，则可以使用它将其状态值传递回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

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

1 个答案: