Question

我目前有我的应用程序结构化，所以我有一个FormWrapper组件，它加载传递的FormName的配置，这可能由React-Router像这样呈现 -

<Route path="/Diary/Test" components={require('./components/wrapperComponents/formWrapper.jsx')} FormName="AppointmentBooking"/>

当FormWrapper加载时，它调用ActionCreator并从服务器获取有关哪个页面的配置，并通过objProps呈现配置中传递的页面。

render: function() {
    return(React.createElement(PageComponents[this.props.FormName], objProps);
}

这样做的原因是，最初我们希望能够让用户轻松地自定义表单的外观和显示的组件，这样我们就可以将表单及其随附的子组件存储在配置中然后使用通用包装器组件加载它们。因此，每个表单的通用内容都可以放在表单包装器中，然后表单特定的代码可以放在每个页面组件中，只加载与该特定页面相关的部分。

我遇到的问题是，如果AppointmentBooking表单还需要在componentWillMount / componentDidMount方法中触发一个动作来加载一些数据（例如预约位置的下拉列表中的选项），我会收到一个＆＃34;无法在发货过程中发货＆＃34;错误。

我对这个问题的推理是，表单包装器触发的初始操作导致了formWrapper的重新渲染，因为它有数据，然后React.createElement尝试渲染AppointmentBooking组件，该组件也触发了因此导致调度员错误。

我已经阅读了有关使用waitFor（）等待第一个操作在触发第二个操作之前完成的事情，但这将涉及子组件知道并依赖于它的父母我我的想法可能意味着我没有保持适当的关注点分离。

这是一个常见问题，我是否正确地接近这个问题？如果没有建议的方法来实现这个目标吗？

Answer 1

Flux最佳做法建议使用＆＃34; Container＆＃34;组件，我认为这样做可以解决您的问题。 https://facebook.github.io/flux/docs/flux-utils.html#best-practices

A＆＃34;容器＆＃34; component是一个虚拟组件，其唯一目的是促进存储通信。通过将该责任外包给单个组件，您可以解决这类奇怪的种族问题。

容器的基本规则是，它们应始终呈现相同的子组件，同时传递从任何相关商店收集的唯一信息（作为道具）。没有条件逻辑。只是路由信息。

如果您能够重组为此范例，它将解决您的问题。但是，如果你已经在你的应用程序中传播了行动和听众，这不是一项小任务。