使用Backbone View作为React组件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用Backbone View作为React组件相关的知识,希望对你有一定的参考价值。

我有骨干控制,我想在将用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} />;
  }
}

以上是关于使用Backbone View作为React组件的主要内容,如果未能解决你的问题,请参考以下文章

如何检查 Backbone.View 当前是不是在 DOM 中呈现?

React + Backbone,目标容器不是 DOM 元素

从 Backbone.View 中分离模板逻辑

React

React-Redux 应用程序真的可以像 Backbone 一样扩展吗?即使重新选择。在移动

react native ref 怎么使用