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

IT技术 javascript reactjs
2021-04-07 03:50:03

我知道我可以props在渲染组件时通过。我也知道getInitialState方法。但问题是,getInitialState不是很有帮助,因为我的组件不知道它的初始状态。我做。所以我想在渲染它时传递它。

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

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

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

我该怎么办?

编辑清晰

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

4个回答

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

只有永久组件才能在getInitialState. getInitialState如果同步是您的目标Props in是一种反模式。getInitialState仅在首次创建组件时调用,因此可能会引发一些错误,因为事实来源不是唯一的。检查这个答案

引用文档:

使用从父级传递下来的props在 getInitialState 中生成状态通常会导致“真实数据来源”的重复,即真实数据在哪里。只要有可能,即时计算值以确保它们以后不会不同步并导致维护麻烦

你仍然可以这样做:

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

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

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

这个props不会被修改,所以每次render被调用时使用它都没有问题

编辑的答案:

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

嗯.. 所以,您可能会同意,为了防止多次 Ajax 调用(每个组件一个),我应该让最顶层的组件成为有状态的组件,而其他组件将只用 呈现props,对吗?
2021-05-25 03:50:03
谢谢回复。所以,你是说我可以在 getInitialState 中使用道具,即使它是一个反模式?那么,你能告诉我如何解决我在问题编辑中提出的问题吗?
2021-06-05 03:50:03
那将是(恕我直言)做这件事的反应方式。
2021-06-14 03:50:03
React 教程是关于这个的:facebook.github.io/react/docs/tutorial.html
2021-06-21 03:50:03

引用React 文档

使用从父级传下来的 props 来生成状态getInitialState通常会导致“真实数据源”的重复,即真实数据在哪里。只要有可能,即时计算值以确保它们以后不会不同步并导致维护麻烦

和:

但是,如果您明确表示同步不是这里的目标,那么这不是反模式

所以如果你的 props 包含 avalue和 an initialValue,那么很明显后者是用于初始化的,没有混淆。

有关代码示例,请参阅React 文档

很好的答案,我应该更新我的信息以包含您的信息并纠正反模式错误概念吗?
2021-05-29 03:50:03
当然,可以随意包含/复制/粘贴等。
2021-05-30 03:50:03

如果您知道状态,那么我倾向于争辩说您正在渲染的组件并没有真正控制它。React 的想法是任何特定的状态都只存在于一个位置。

创建列表的评论的持有者将管理状态给我。CommentList 只负责呈现它们。
2021-06-11 03:50:03
谢谢回复。组件不应该知道状态。它应该渲染我告诉他渲染的任何东西?对?我用我想知道你将如何处理的场景更新了这个问题。
2021-06-16 03:50:03

在看到其他答案并对其进行了一些研究后,我得出了这个结论:

如果您在客户端渲染 React(编译或未编译),这是默认方法,您应该尝试从组件内部进行额外的 Ajax 调用以获取初始状态。也就是说,不要使用props. 它更干净,更不容易出错。

但是,如果您在服务器(Node.js 或 ReactJs.NET)中进行渲染,则没有理由为每个请求进行这个额外的 Ajax 调用。此外,它对 SEO 不友好。您希望完整页面作为您的请求(包括数据)的结果出现。所以,正如@RandyMorris 指出的那样,在这种情况下,可以使用 props 作为初始状态,只要它是初始状态即可。也就是说,没有同步。