javascript - Reactjs:为什么子组件不在数据更改时重新呈现?

标签 javascript reactjs

React.js 是否应该在根组件的状态发生变化时重新渲染所有子组件(子组件)?

请看这个例子: http://jsfiddle.net/F8H7p/8/

在上面的例子中,当 Dashboard 组件的状态改变时,只有 Search 子组件重新渲染。但其他子组件 - 部分、图表和小部件不会重新呈现。

这是我的 renderComponent 的样子:

React.renderComponent(Dashboard({title: "D", children: [Section({title: "S", children: [Widget({title: "W"}), Chart()]})]}), document.body);

知道为什么吗?

最佳答案

当您更新 Dashboard 时,React 会重新渲染由 Dashboard render 方法创建的每个组件。在这种情况下,您通过 this.props.children 传递组件,因此预计它们不依赖于 Dashboard 的状态,因此它们不会重新呈现。

如果您的应用不是这种情况,您可能想要创建一个更高级别的 Page 组件来处理此状态并呈现 Dashboard 组件及其子组件。使用该结构,您的 renderComponent 调用将类似于:

React.renderComponent(Page(), document.body);

关于javascript - Reactjs:为什么子组件不在数据更改时重新呈现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23800355/

相关文章:

javascript - 获取动态构造的 html 表中的行值

javascript - Backbone View +谷歌可视化API

javascript - 根据数据属性更新输入的 div

reactjs - react-chartjs-2 保持 x 轴始终为 0% 到 100%

javascript - 多个实例或子包中的 Axios 默认 header

javascript - 如何从下拉边框底部删除边框颜色?

javascript - 如果在某个时间间隔内没有获得 MouseOver,则使用 jQuery 自动隐藏 div

javascript - 当使用socket.io发送JavaScript对象时,它是将其编码为JSON还是以二进制格式发送?

javascript - 使用 useReducer 和 useContext,在分派(dispatch)操作时不会重新呈现组件。如何触发重新渲染?

reactjs - Flask session 无法在 React 前端应用程序上创建 cookie(使用 set-cookie 响应 header )