Question

我有骨干控制，我想在将用React和Redux编写的新模块中重用。我很不确定如何处理这个问题。我最初的想法是将这个主干视图包含在一个反应组件中。我以类似的方式完成了示例项目：

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状态的问题。

另一种方法是将骨干视图放入全局窗口对象，而不仅仅是从代码的React-Redux部分与它交互。但我也不确定。那么互联网的人们，你对这个炙手可热的问题有答案吗？

Answer 1

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

https://jsfiddle.net/x8wnb5r8/

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

有什么好处？

Backbone在渲染时不会强制执行许多规则，但它确实在任何视图的核心都有一个工作的DOM元素，可以在视图的生命周期中与之交互。这种方法保持了这一点。
此解决方案不涉及React的虚拟DOM，这意味着Backbone视图可以更新而无需触发任何React功能。哪个也应该比 DOM-＆gt;虚拟DOM-＆gt; DOM 解决方案（与innerHTML一样）表现得更好。
骨干模型事件仍然可以直接触发视图功能，不需要让模型层在Backbone和React之间进行交互

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

这是一个更复杂的版本，显示React父组件（OtherReactContainer）和Backbone视图（BBView）更新的状态更改：https://jsfiddle.net/w11Ly493/

Answer 2

类似于mikeapr4的答案，在支持引用的React版本中，可以通过将引用el传递给Backbone.View的构造函数来实现：

// (React 16.4.2 with babel+classProperties)
class BackboneHost extends React.PureComponent {
  view = null;
  hostElRef = React.createRef();

  componentDidMount() {
    this.view = new MyBackboneView({ el: this.hostElRef.current });
    this.view.render();
  }

  componentWillUnmount() {
    this.view.remove();
  }

  render() {
    return <div ref={this.hostElRef} />;
  }
}

使用Backbone View作为React组件

2 个答案: