reactjs - 使用 Backbone View 作为 React 组件

Question

我有主干控制，我想在用 React 和 Redux 编写的新模块中重用它。我非常不确定如何处理这个问题。我最初的想法是将这个主干 View 包装在一个 react ​​组件中。我在示例项目中以类似的方式完成:

import React from 'react'
import ReactDOM from 'react-dom';
import Backbone from 'backbone';

var Test  = Backbone.View.extend({

render: function () {
    this.$el.html("<p> If you see that it's working</p>");
    return this;
}
});

class TestComponent extends React.Component {

  backboneComponent;

constructor(props) {
    super(props);
    this.backboneComponent = new Test();
}

render(){
    return (<div dangerouslySetInnerHTML={{__html:   this.backboneComponent.render().el.innerHTML}} ></div>);
}
}

ReactDOM.render( <div>
   <TestComponent/>
</div>
,document.getElementById("root"));

所以这个东西有效，但由于这个危险的SetInnerHtml参数，我对它有了新的想法。我也不确定如何解决将 redux 状态与 Backbone 模型绑定(bind)的问题。

另一种方法是将主干 View 放入全局窗口中对象，而不仅仅是从代码的 React-Redux 部分与其交互。但我对此也不确定。那么互联网上的人们，对于这个紧迫的问题你有答案吗？

Answer 1

另一种方法是允许 React 组件渲染到 DOM，然后使用 React 组件渲染的 DOM 元素来渲染 Backbone 元素。

https://jsfiddle.net/x8wnb5r8/

componentDidMount() {
  this.backboneComponent = new Test({
    el: ReactDOM.findDOMNode(this)
  }).render();    
}

有什么优点？

• Backbone 在渲染时不会强制执行许多规则，但它确实希望在任何 View 的核心都有一个工作 DOM 元素，可以在 View 的生命周期中与其进行交互。这种方法坚持了这一点。

• 此解决方案不涉及 React 的虚拟 DOM，这意味着 Backbone View 可以更新而无需触发任何 React 功能。它的性能也应该比 DOM->virtual DOM->DOM 解决方案(与innerHTML 一样)更好。

• Backbone 模型事件仍然可以直接触发 View 功能，不需要模型层在 Backbone 和 React 之间交互

最终代码还需要 componentDidUpdate() 和 componentWillUnmount() 处理程序。

这是一个更详细的版本，显示了 React 父组件 (OtherReactContainer) 和 Backbone View (BBView) 更新的状态更改:https://jsfiddle.net/w11Ly493/