使用 Backbone.js 视图作为React组件

ahy6op9u 于 2022-11-10 发布在 React

关注(0)|答案(2)|浏览(170)

我有一个 Backbone.js 控件，我想在用React和Redux编写的新模块中重用它。我很不确定该如何处理它。我最初的想法是将这个 Backbone.js 视图 Package 在一个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.js 模型的问题。
另一种方法是把 Backbone.js 视图放到全局窗口对象中，而不仅仅是从代码的React-Redux部分与之交互。但我也不确定。所以互联网上的人们，你有这个迫切问题的答案吗？

backbone.js

来源：https://stackoverflow.com/questions/43184511/use-backbone-view-as-react-component

2条答案

按热度按时间

v7pvogib1#

另一种方法是允许React组件呈现到DOM，然后使用React组件呈现的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.js 模型事件仍然可以直接触发视图功能，不需要让模型层在 Backbone.js 和React之间交互

最后的代码还需要componentDidUpdate()和componentWillUnmount()处理程序。
下面是一个更详细的版本，显示了React父组件（OtherReactContainer）和 Backbone.js 视图（BBView）更新的状态变化：https://jsfiddle.net/w11Ly493/

赞(0）回复(0）举报 2022-11-10

flvlnr442#

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

赞(0）回复(0）举报 2022-11-10

我来回答

使用 Backbone.js 视图作为React组件

2条答案

相关问题

热门标签

最新问答