时间戳

首页 > 解决方案 > React 没有渲染 UI 中的所有元素

reactjs - React 没有渲染 UI 中的所有元素

问题描述

我正在开发一个应用程序，我们使用 Backbone，然后在一些 Backbone 视图中渲染 React（基本上从 Backbone 缓慢过渡到 React）。我遇到了一个问题，我的标题上有由 Backbone 控制的按钮，这会导致由 React Elements 构建的 UI 发生变化。由于几个内部原因，我们必须使用 React 15。问题是它在第一次访问视图时工作，但是如果我离开视图转到另一个视图然后返回到同一个视图，单击按钮会导致 React渲染（好），但添加的 UI 元素不会在 UI 中的任何位置呈现。

为简单起见，我只是想添加一个简单的 div。这是工作流程

  1. 导航到主干/反应视图

  2. 单击主干中的按钮

  3. 按钮发出事件

  4. 反应监听事件

  5. React 将新的 div 添加到渲染中，并且 div 按预期显示在页面上

  6. 使用浏览器后退按钮离开视图

  7. URL 更改和主干加载不同的视图

  8. 导航回主干/反应视图

  9. 单击主干中的按钮

  10. 按钮发出事件

  11. 反应监听事件

  12. React 渲染但新的 div 未添加到页面

我检查过的

  1. 查看 React 渲染生成的对象，新的 div 确实在这两种情况下都存在
  2. 扫描 DOM，给 div 一些独特的文本，它不在 DOM 中

我没有显示任何代码，因为会有太多，我更多的是寻找想法，或者在什么情况下，即使 React 渲染在渲染函数对象中返回该元素，React 也可能无法在 UI 中添加某些元素生成。或者另一方面，也许它是 Backbone 限制 React 的东西，我不能确定。

{$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: {…}, …}

任何探索的想法或途径将不胜感激！

标签： reactjsbackbone.js

解决方案

我解决了这个问题。不知何故，reactDom 决定不渲染模式，即使渲染方法按预期返回组件。解决方法是将 ReactDom.render 返回的 React 组件作为变量存储在主干中，然后在那里而不是在实际的 React 组件中操作其状态。

在骨干网：

this.component = ReactDOM.render( ...)

然后当按下按钮时（由 Backbone 处理）：

handleConfigure: function() {
        this.component.setState({ 'showConfigModal': !this.component.state.showConfigModal });
      },

推荐阅读