javascript - ReactJs:如何在渲染组件时传递初始状态？

Question

我知道我可以在渲染组件时传递 props。我也知道 getInitialState 方法。但问题是，getInitialState 并没有多大帮助，因为我的组件不知道它的初始状态。我愿意。所以我想在渲染时传递它。

像这样的东西(伪代码):

React.render(<Component initialState={...} />);

我知道我可以使用 prop 作为初始状态，但这听起来像是一种反模式。

我该怎么办？

编辑清晰

假设我有一个 CommentList 组件。当我第一次渲染它时，初始状态对应于我数据库中当前评论的快照。当用户添加评论时，此列表将发生变化，这就是为什么它应该是 state 而不是 props 的原因。现在，为了呈现评论的初始快照，我应该将它传递给 CommentsList 组件，因为它无法知道它。我的困惑是我看到传递此信息的唯一方法是通过 props 这似乎是一种反模式。

Answer 1

免责声明:较新版本的 React 以不同的方式处理此问题。

只有永久组件可以在 getInitialState 中使用 props。如果同步是您的目标，getInitialState 中的 Prop 是一种反模式。 getInitialState 仅在首次创建组件时调用，因此它可能会引发一些错误，因为事实来源不是唯一的。 Check this answer .

Quoting documentation:

Using props, passed down from parent, to generate state in getInitialState often leads to duplication of "source of truth", i.e. where the real data is. Whenever possible, compute values on-the-fly to ensure that they don't get out of sync later on and cause maintenance trouble

您仍然可以:

getInitialState: function() {
   return {foo: this.props.foo}
}

因为它们将成为您应用的默认 Prop 。但只要您使用 prop 来设置一个可能不会改变的值，您就可以在 render 函数中使用相同的 prop。

<span>{this.props.foo}</span>

这个 Prop 不会被修改，所以每次调用 render 时都可以使用它。

编辑后的答案:

在这种情况下，您的初始状态不应该是 Prop ，而应该是填充评论列表的 ajax 调用。