反应不呈现UI中的所有元素

编程问答 2022-06-03

问题描述

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

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

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

  2. 单击主干中的按钮

  3. 按钮发出事件

  4. 对事件进行监听

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

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

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

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

  9. 单击主干中的按钮

  10. 按钮发出事件

  11. 对事件进行监听

  12. 反应渲染，但新的div未添加到页面

我检查过的东西

  1. 看着React生成的对象，两种情况下确实都存在新的div
  2. 扫描的DOM，为div提供了一些独特的文本，它不在DOM中

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

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

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

解决方法

我解决了这个问题。某种程度上，即使render方法按预期返回了组件，reactDom仍决定不渲染模式。解决方法是将从ReactDom.render返回的React组件作为变量存储在主干中，然后在此处而不是在实际的React组件中操作其状态。

在骨干网中：

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

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

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