在反應容器及其子組件之間傳遞數據

Question

我有一個<Container />組件，它將<Card />作為子項：

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

<Card />有一個 boolean state openExpansion我想要一旦更改，所有兄弟<Card />都會更改為相同的值。 實現這一目標的最佳方法是什么？ 顯然，我可以將openExpansion作為<Container /> state 並將其注入每個<Card /> 。 另外我不想使用 redux 商店，因為我不知道<Container />會在哪里被調用。 但是有沒有辦法保持openExpansion as <Card /> state 同時達到同樣的效果？ 謝謝！

Answer 1

如果你想在兄弟姐妹之間共享相同的值，你應該在每個孩子中放置 openExpansion 道具。 此外，如果您想更改 openExpansion，您可以在 Container 中創建 function

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

只需在主組件中創建一個 state 並傳遞 function 即可將 state 更新為 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、state 變量來實現的目標。

Answer 3

我認為您解釋了一個選項，即在 Container 中有一個變量並將其傳遞給每個 Card 組件。 另一種選擇是在 Card 組件內使用 static 屬性。 每個 Card 實例都將具有相同的值。

Answer 4

在我看來，你必須抬起你的 state： 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>
    );
  }
}