具有多个组件的 React 设计模式

Question

我正在尝试做出反应这几天，但我无法弄清楚我的应用程序的设计。

我想要的是创建一个与 API 通信的“复杂”表单。 API 背后有一个经典的 SQL DB。 所以说我有一个视频播放器，它有一个 m2m 到一个播放列表表。

在 React 中，我现在有一个包含播放器所有字段的组件。播放器表中的列表字段显示了可能的播放列表选择（我通过 API 获取此数据）。到目前为止，一切都很好。

如果有人在创建播放器时还想创建一个新的播放列表，现在我想创建一个带有 from 的新组件，用于播放列表的内容（有一个按钮可以单击以添加新的播放列表）。

现在我的问题：

1. 因为播放列表表单需要执行 POST API 调用，并且应该将新创建的 id 返回给播放器表单组件...播放列表组件是否应该有自己的状态？

2. 是否建议两个组件有自己的状态？ （玩家表单中有更多的 m2m 字段，并且只有一个状态，状态很快就难以保持结构化（也因为 react 不鼓励它具有嵌套状态结构。

3. 是否建议在添加新播放列表时卸载播放器表单组件或使播放器表单不可见？

Answer 1

我会看看this

以下是我的看法。这些类型的事情有很多不同的方法，但这是最适合我的方法。

不要给你的子组件它自己的状态，而是让你的所有视图组件无状态并将它们包装在一个大型容器组件中。那么

1) 您的播放列表表单可以接收 post API 函数作为回调。在您的有状态容器中，将其定义为类似

apiPost(){
    apiFunctionCall()
    .then(result){
        this.setState({ data: result })     
    }
}

然后，您可以在任何需要的地方传递该数据，因为您的所有组件都是包含该状态数据的组件的子组件，因此它们都可以将其作为道具接收。您可以对任何组件重复此模式，因此如果您需要在组件之间共享数据，尤其是 api 调用的结果，这将非常有用。另外不要忘记绑定任何设置状态的函数！

2）我有点不清楚你的意思。这些组件是兄弟姐妹还是后代？如果它们是相同的兄弟姐妹（即同一事物的多个实例），那么如果需要，请将它们移动到单独的文件并将它们定义为它们自己的有状态反应组件。我通常发现，对于上述模式，这很少需要，并且您的状态可以在一个地方进行管理。如果您对此进行澄清或发布一些代码，我可能会提供更多帮助。

3) 我会卸载它，我会用一些漂亮的内联逻辑来完成它。状态变量可能是displayComponent: true。当您想要隐藏组件时，将其设置为 false 并在您希望它被看到时将其设置为 true。然后在您的渲染语句中就很简单了：

{this.state.displayComponent &&
<Component />}

现在每次 React 渲染 dom 时，只有当该变量设置为 true 时，您的组件才会显示。

希望这有帮助！我强烈建议您阅读我上面链接的文章，并进一步探索这种设计模式。它对我的 React 开发帮助很大。