Question

我最近开始学习React，我正在尝试创建一个向导组件。最初我想象它可以像这样使用：

<Wizard isVisible={this.state.isWizardVisible}>
    <Page1 />
    <Page2 />
</Wizard>

当我想提取属性，甚至从子节点（Page1，Page2）中提取组件/覆盖向导（标题，页脚组件等）时，我开始遇到问题（仍然有OOP思维模式）。

这当然无法完成，因为在Wizard.render上我无法访问组件本身。

然后我遇到了一个带有向导组件的this repo。 repo中的组件配置了一个Steps数组，这些步骤是javascript对象，用于配置向导中的当前步骤，并包含一个返回React组件的组件属性。

这种方法肯定解决了这个问题，但我想知道它是否可以采用不同的方式，或者是否有更多的“React”解决方法，每个Page / Step组件都封装了行为而不是其他方式周围（像在回购中）。

Answer 1

＆＃34; React＆＃34;解决它的方法是将整个应用程序状态保持在组件层次结构的最顶层。当然，React本质上只是MVC中的V，并且在涉及如何管理数据和状态逻辑时并不自以为是。但你想要达到的目标是这样的：

<Wizard isVisible={this.state.isWizardVisible}>
    <GenericPage foo={something} bar={somethingElse} />
</Wizard>

通过这种逻辑，Wizard可以访问您希望提供的所有应用程序状态，并传递GenericPage呈现当前页面所需的任何内容。如果你需要一个GenericPage组件来修改状态，那么只需将函数作为道具传递下来。

有几个框架可以实现处理应用程序状态更改的常用方法。 Facebook有Flux，但Redux似乎推动所有正确的按钮，是我的首选框架。

Answer 2

您可以尝试使用以下内容记忆道具：

然后你可以将道具从Page1传递给Page2组件。