使用多个组件实现设计模式

Question

我现在试图做出反应已有好几天了，但是我的问题很明显，我的应用程序设计很清楚。

我想要的是创造一个复杂的＆＃34;与API通信的表单。在API背后有一个经典的SQL DB。 所以说我有一个视频播放器，它与播放列表表有一个m2m。

在React中我现在拥有一个包含播放器所有字段的组件。播放器表格中的列表字段显示可能的播放列表选择（我通过API获取此数据）。到现在为止还挺好。

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

现在我的问题：

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

2. 建议两个组件都有自己的状态吗？ （在玩家形式中有更多m2m字段，只有一个状态，状态很快就难以保持结构化（也因为反应阻止它具有嵌套状态结构。

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

Answer 1

我会看看this

以下是我的意见。这些类型的东西有很多不同的方法，但这对我来说是最好的。

不要让你的子组件成为自己的状态，而是将所有视图组件设置为无状态，并将它们包装在一个大容器组件中。然后

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

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

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

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

3）我会卸载它，我会用一些漂亮的内联逻辑来完成它。变量状态可能为displayComponent: true。如果希望隐藏组件，请将其设置为false，并在需要时将其设置为true。然后在你的渲染语句中，它就像：

一样简单

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

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

希望这有帮助！我强烈建议您阅读我上面链接的文章，并更多地探讨这种设计模式。它在我的React开发中给了我很大的帮助。