我知道我可以在渲染组件时传递props
。我也知道getInitialState
方法。但问题是,getInitialState
并不是很有帮助,因为我的组件不知道它的初始状态。我知道。所以我想在渲染的时候传递它。
类似这样的代码(伪代码):
React.render(<Component initialState={...} />);
我知道我可以使用prop
作为初始状态,但这闻起来像是反模式。
我该怎么办?
用于CLARITY的编辑
假设我有一个CommentList
组件。在我第一次呈现它的时候,初始状态对应于我的数据库中当前评论的快照。当用户包含注释时,这个列表将会改变,这就是为什么它应该是一个state
而不是props
。现在,为了呈现注释的初始快照,我应该将它传递给CommentsList
组件,因为它没有办法知道它。我的困惑是,我看到的传递此信息的唯一方法是通过props
,这似乎是一种反模式。
发布于 2015-01-14 01:52:57
免责声明: React的新版本以不同的方式处理此问题。
只有永久组件才能在getInitialState
中使用道具。如果同步是您的目标,那么getInitialState
中的Props就是一种反模式。只有在第一次创建组件时才会调用getInitialState
,因此它可能会引发一些错误,因为事实来源不是唯一的。Check this answer。
在getInitialState中,使用从父级传递的属性来生成状态的
通常会导致“真相来源”的重复,即真实数据所在的位置。只要有可能,就动态计算值,以确保它们不会在以后失去同步并导致维护问题
您仍然可以执行以下操作:
getInitialState: function() {
return {foo: this.props.foo}
}
因为它们将成为你的应用程序的默认道具。但是,只要您使用属性来设置一个可能不会更改的值,您就可以在render
函数中使用相同的属性。
<span>{this.props.foo}</span>
这个道具不会被修改,所以每次调用render
时使用它都没有问题。
编辑后的答案:
在这种情况下,您的初始状态不应该是一个道具,而应该是一个填充评论列表的ajax调用。
发布于 2015-10-19 23:05:57
在getInitialState
中,使用从父级传递的属性来生成状态的
通常会导致“真相来源”的重复,即真实数据所在的位置。只要有可能,就动态计算值,以确保它们不会在以后失去同步并导致维护问题
和:
然而,如果您明确指出同步不是这里的目标,那么这不是a anti-pattern
因此,如果您的道具包含一个value
和一个initialValue
,那么很明显后者是用于初始化的,并且没有混淆。
有关代码示例,请参见the React docs。
发布于 2015-01-14 01:57:01
如果你知道状态,那么我倾向于认为你呈现的组件并不是真正控制它的。React中的想法是,任何特定的状态都只存在于一个位置。
https://stackoverflow.com/questions/27928296
复制相似问题