当前位置: 首页 > 面试题库 >

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

汪耀
2023-03-14
问题内容

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

这样的东西(伪代码):

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

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

我该怎么办?

编辑清晰度

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


问题答案:

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

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

报价文件:

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

您仍然可以:

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

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

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

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

编辑答案:

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



 类似资料:
  • 我知道我可以在呈现组件时传递。我还知道方法。但问题是,不太有用,因为我的组件不知道它的初始状态。我有。所以我想在渲染的时候传递它。 类似这样的内容(伪代码): 我该怎么办? 假设我有一个组件。当我第一次呈现它时,初始状态与数据库中当前注释的快照相对应。当用户包含注释时,该列表将发生更改,这就是为什么它应该是而不是。现在,为了呈现注释的初始快照,我应该将它传递给组件,因为它无法知道它。我感到困惑的是

  • 问题内容: 我想在我的ajax请求完成后呈现我的组件。 在下面您可以看到我的代码 但是我收到下面的错误,因为我正在ajax请求的done方法内返回render。 有没有办法在开始渲染之前等待我的ajax请求结束? 问题答案: 有两种处理方法,您可以选择哪种方法取决于应该拥有数据的组件和加载状态。 将Ajax请求移至父级并有条件地渲染该组件: 将Ajax请求保留在组件中,并在加载时有条件地渲染其他内

  • 非常简单的例子:我的App.js文件读取 我的Test.js文件上写着 在控制台中,渲染总是打印两次。为什么啊?

  • 问题内容: 我已经在SocketIO的帮助下创建了一个小的ReactJS仪表板,用于实时更新。即使我更新了仪表板,也仍然使我感到不确定我是否正确执行了操作。 最让我感到困扰的是getInitialState中的Props作为反模式发布。我创建了一个仪表板,该仪表板从服务器获取实时更新,除了加载页面外,不需要用户交互。根据我的阅读,应该包含一些内容,这些内容将确定是否应重新渲染该组件,以及....我

  • 问题内容: 我正在尝试使用和JSX 渲染具有重音符号的元素,但它没有返回我想要的东西。 我的JSX: 我呈现的JavaScript: 我在浏览器中的结果: 我已经在标签内的索引文件中进行了设置,如果直接在页面内容中键入该单词,则重音字符将在页面标题和正文中起作用,但是在由 我该如何解决这个问题? 问题答案: 您所看到的是由于UTF-8字节数组以ASCII呈现的结果,可能是代码页ISO 8859-1

  • 本文向大家介绍vue将data恢复到初始状态 && 重新渲染组件实例,包括了vue将data恢复到初始状态 && 重新渲染组件实例的使用技巧和注意事项,需要的朋友参考一下 1. 将data恢复到初始状态 Object.assign(this.$data, this.$options.data()) // 初始化data 这里的 this.$options.data() 作为源对象, this.$d