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值，因为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>
    );
  }
}

在容器及其子组件之间传递数据

4 个答案: