在容器及其反应中的子组件之间传递数据

Question

我有一个<Container />组件，该组件将<Card />的列表作为子代：

<Container>
  <Card />
  <Card />
</Container>

<Card />具有我要更改的布尔状态openExpansion，所有同级<Card />都将更改为相同的值。做到这一点的最佳方法是什么？显然，我可以将openExpansion设置为<Container />状态，并将其注入到每个<Card />中。我也不想使用redux存储，因为我不知道<Container />的调用位置。但是有没有办法在达到相同效果的同时将openExpansion保持为<Card />状态？谢谢！

Answer 1

[如果要在兄弟姐妹之间共享相同的值，则应在每个孩子中放置openExpansion道具。另外，如果您想更改openExpansion，则可以在Container中创建一个函数

class Container extends React.Component{
    ....
    state = {
        openExpansion: true
    }

    changeOpenExpansionValue = (value) => this.setState({openExpansion:value})
    render(
        <div>

        <Card openExpansion={this.state.openExpansion} 
            toggleOpenExpansion={this.changeOpenExpansionValue }/>

        <Card openExpansion={this.state.openExpansion} 
            toggleOpenExpansion={this.changeOpenExpansionValue }/>
        </div>    

    )

}

任何时候只要要更改一个子组件的所有值，只需从卡中调用this.props.toggleOpenExpansion(boolValue)
您不能在每个Card中本地保存openExpansion值，因为它只能在Card组件内部存储和访问，并且可能与同级中的值不同

Answer 2

只需在主要组件中创建状态，然后将功能更新为Card。有点像

   const App = () => {

   const [openExpansion, setOpenExpansion] = React.useState(false);

   return (
     <Container>
     <Card setOpenExpansion={setOpenExpansion} openExpansion={openExpansion} />
      <Card />
    <Card setOpenExpansion={setOpenExpansion} openExpansion={openExpansion} /><Card /> /* Similar to above card */
     </Container>
    );
   };

  const Card = ({setOpenExpansion openExpansion})  => {
    return (
       <div onClick={() => openExpansion(true)}>
            {openExpansion ? "opened" : ""}
       </div>
    );
  }

如果我做对了，这是您想要通过传递setState状态变量来实现的。

Answer 3

我想您解释了一个选项，该选项在Container中具有一个变量并将其传递给每个Card组件。另一种选择是在Card组件内使用静态属性。每个Card实例将具有相同的值。

Answer 4

在我看来，您必须提高状态：https://reactjs.org/docs/lifting-state-up.html

因此，在您的情况下，您可以创建包装这些卡的方法/功能。

class WrappedCards extends React.Component {
  constructor(props) {
    super(props);
    this.handleOpenExpansion= this.handleOpenExpansion.bind(this);
    this.state = {openExpansion : false};
  }

  handleOpenExpansion(value) {
    this.setState({openExpansion : value});
  }

  render() {

    return (
      <Container>
        <Card
          handleOpenExpansion={this.handleOpenExpansion} />
      </Container>
    );
  }
}