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

我有一个组件，该组件包含以下组件的列表：

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

有一个我想要的布尔状态openExpansion一旦更改，所有同级将更改为相同的值。实现这一目标的最佳方式是什么？ 显然，我可以将openExpansion作为状态，并将其注入到每个状态。另外，我不想使用redux商店，因为我不知道在哪里调用。但是，有没有一种方法可以在实现相同效果的同时保持开放式扩展作为状态？

---

谢谢

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

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.toggleOpenExpansionboolValue，就可以更改一个子组件中的所有值

---

您不能将openExpansion值本地保存在每张卡中，因为它只能在卡组件内部存储和访问，并且可能与同级组件中的值不同，只需在主组件中创建一个状态并将更新状态的函数传递给卡即可。差不多

   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、state变量来实现的。

我想您解释了一个选项，即在容器中有一个变量，并将其传递到每个卡组件中。另一个选项是在卡组件内使用静态属性。每个卡实例都具有相同的值。

在我看来，您必须提升状态：

因此，在您的情况下，您可以创建一个方法/函数，在其中包装这些卡片

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>
    );
  }
}

---

听起来你已经知道最好的解决方案是什么，把bool移到父对象的状态。但是你能告诉我们你为什么不想这样做吗？@ChrisG不，我不知道最好的解决方案，这就是讨论的重点。你在问题中提到了最好的解决方案。再次：将bool移到父对象，就像这里推荐的至少三个答案一样。如果您不想这样做，请告诉我们为什么不。@ChrisG因为这样，它总是依赖于从中传递的道具，因此最好调用它，而不是一个更通用的组件。最好有一个解决方案来实现通用性。但是可能没有办法做到这一点。如果没有某种外部包装，比如父组件、上下文、redux等等，孩子们就无法相互通信。