为什么我们需要在父组件中保持状态

Question

我是 React 新手，一直在努力解决我们需要在 React 中保持状态的位置。我遇到了一个将状态放在父组件中并通过道具访问该状态的示例。也就是说，有Accordion组件，Accordion要么处于“打开”状态，要么处于“关闭”状态 状态，我们存储 该信息作为 父组件状态 （不在手风琴内） 内的标志。我们告诉 Accordion 通过传递 isOpen 作为 prop 来呈现哪种方式。当 isOpen 为真时，它呈现为 打开。当 isOpen 为 false 时，它​​呈现为关闭状态。

*问题是为什么我们需要在父组件中保留状态，因为我们可以在 Accordion 组件中保留状态并在其中管理它。 *

Answer 1

在您的示例中，如果仅 Accordion 需要可能是一个更好的地方的状态（示例可能不正确）。一般来说，要遵循的一个好的规则是尽可能将状态保持为“特定”或“狭窄”。

仅当作为这些祖先的子级的其他组件也需要访问时，才需要在树中提升状态（向其父级或更早的祖先）。

但是，如果在您的示例中，假设 AccordionParent 正在呈现不同的 UI 或使用 isOpen 做某事，那么这可能是一个好地方（因为将孩子的状态公开给其父母通常是个坏主意）。

Answer 2

如果isOpen只是在Accordion中使用，最好保持Accordion中的状态。
但有时状态 isOpen 被其他人使用，例如

<>
 <Accordion isOpen={this.state.isOpen} />
 {<ToggleButton onClick={()=> this.setState({isOpen: !this.state.isOpen})} />}
</>

你必须在父级中保留 isOpen

Answer 3

就像 React 中的许多东西一样，这取决于您将赋予 isOpen 变量的用途，如果您只想在 <Accordion /> 组件中使用它，您可以将它作为本地状态它，像这样：

class Accordion extends Component {
  state = { isOpen: false }

  // Use to close the <Accordion />
  closeAccordion = () = {
    this.setState({ isOpen: false });
  }

  render() {
    return(...Code for the <Accordion />)
  }
}

另一种情况是，如果您想将isOpen 变量用于另一个组件或函数，而不仅仅是<Accordion />，如下所示：

class Wrapper extends Component {
  state = { isOpen: false };

  // Handle the click of the <Button />
  handleClick = () => {
    const { isOpen } = this.state;

    this.setState({ isOpen: !isOpen })
  };

  render() {
  const { isOpen } = this.state;

    return(
      <>
        <Accordion isOpen={isOpen} />
        <Button onClick={this.handleClick} />
      </>
    )
  }
}