小编典典

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

reactjs

我知道我可以props在渲染组件时通过。我也知道这种getInitialState方法。但是问题是,getInitialState由于我的组件不知道它的初始状态,并没有太大帮助。我做。所以我想在渲染时通过它。

这样的东西(伪代码):

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

我知道我可以使用a prop作为初始状态,但这闻起来像是反模式。

我该怎么办?

编辑清晰度

想象一下我有一个CommentList组件。到我第一次渲染它时,初始状态对应于数据库中当前注释的快照。当用户包含评论时,此列表将更改,这就是为什么它应该是a
state而不是的原因props。现在,为了呈现注释的初始快照,我应该将其传递给CommentsList组件,因为它无法知道它。我的困惑是,我看到传递此信息的唯一方法是通过,props这似乎是一种反模式。


阅读 196

收藏
2020-07-22

共1个答案

小编典典

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

只有永久性组件才可以使用道具getInitialStategetInitialState如果同步是您的目标,则提出建议是一种反模式。getInitialState仅在首次创建组件时调用,因此它可能会引发一些错误,因为真相的来源不是唯一的。

报价文件:

使用从父代传递来的道具在getInitialState中生成状态通常会导致“真相来源”(即真实数据所在的位置)重复。尽可能实时地计算值,以确保以后不会出现不同步并造成维护麻烦

您仍然可以:

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

因为它们将是您应用的默认道具。但是,只要您使用prop设置一个可能不会改变的值,就可以在render函数内部使用相同的prop 。

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

该道具不会被修改,因此每次render调用该道具都没有问题。

编辑答案:

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

2020-07-22