ReactJS :如何在ReactJS组件中包装knockoutJS页面

Question

视图(HTML)

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2><span data-bind="text: fullName"> </span>!</h2>

nameConcat.js (KnockoutJS)

var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);

    this.fullName = ko.pureComputed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
};

ko.applyBindings(new ViewModel("Tom", "Haykens"));

反应组分

class NameConcat extends React.Component {
  render() {
    return (
       ???
    );
  }
} 

我是ReactJS新手。如何从knockoutJS组件显示ReactJS应用程序页？用KnockoutJS重写ReactJS页面不是一种选择。

提前谢谢。

Answer 1

在我的项目中，骨架是用Durandel设计的，这是我不能使用React重写选项的原因之一。

所以我要用的是：

案例1) -希望以KO方式绑定数据

public observableVariable = Observable();

public binding() { // durandle lifecycle hook // observable declared with the class 
    reactDom.render(<span data-bind={`text: observableVariable `}></span>, document.getElementById('reactRoot'));
    }

希望绑定已经存在的KO页面以作出反应，并让DOM在真正的DOM中进行更新。

public observableVariable = Observable();

public binding() { // durandle lifecycle hook // observable declared with the class 
    reactDom.render(<div data-bind={`compose: { model: '-- index page where the knockout binding is written --',activationData: { --Observable parameter--: --Observable data--}    }`}></div>, document.getElementById('reactRoot'));
    }

案例3) -模板绑定

//宣布在顶部所有可观察到的 //所有这些组件都可以从react组合子节点发送到任何位置

<div dangerouslySetInnerHTML={{
            __html: `<!--ko widget: {
                        kind: '--index--',
                        name: 'sample comp',
// write all the observable dependencies here , 
                        id: 'sample Id'
                    } -->
                    <!-- /ko -->`}} />

例4)如果您希望使用可观察的方法加载常规react组件:我的意思是，如果您想要维护一些可观察的数据，就可以在react中使用。

有一个跟踪对象，并使用可观察订阅保持数据同步：

{
    self reactPropValue;
    self.selectedVals.subscribe(function (newValue: any) {
                    let val = ko.toJSON(newValue);
                    reactPropValue= ko.toJSON(selectedVals());
                });
}

现在，您可以将它作为一个支柱传递到reactDom组件中，每次可观察到的订阅更改都会确保获得一个新的值，不要忘记将reactDom封装在一个函数中并调用订阅，因为通过设计它不会触发重新加载。

如果您不在durandel中，您可能需要自己添加ko.applybinding，否则就可以了。

请注意控制台窗口中的错误消息，如果您得到了错误消息，可能会有错误消息。

如果我的答案没有正确的格式化，很抱歉。