Question

我是React的新手，正在为需要在React中保持状态而苦苦挣扎。我遇到了一个示例，该示例将状态放在父组件中，并通过props访问该状态。也就是说，有 Accordion组件，而 Accordion 处于“打开” 状态，或者是“关闭” 强>状态，我们存储该信息作为标记在父组件的状态 （不在手风琴内部）之内。我们告诉 手风琴通过传递 isOpen 作为道具来呈现。当 isOpen 为true时，它将呈现为打开。当 isOpen 为false时，它将呈现为关闭状态。

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

Answer 1

在您的示例中，如果仅，Accordion需要的状态可能更合适（示例可能不正确）。通常，要遵循的良好规则是将状态保持为“特定”或“窄”。

如果只有作为祖先的子级的 other 组件也需要访问，则只需要在树中将State升高（向其父级或更早的祖先）。

但是，如果在您的示例中，假设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} />
      </>
    )
  }
}

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

3 个答案: