使用Backbone View作为React组件

Posted 2021-05-05

我有骨干控制，我想在将用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部分与其进行交互。但我也不确定。那么互联网的人们，你对这个炙手可热的问题有答案吗？

答案

另一种方法是允许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->虚拟DOM-> DOM解决方案（与innerHTML一样）表现更好。
• 骨干模型事件仍然可以直接触发视图功能，不需要让模型层在Backbone和React之间进行交互

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

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

另一答案

类似于mikeapr4的答案，在React支持refs的版本中，同样可以通过将ref 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} />;
  }
}