Question

查看（HTML）

notify()

nameConcat.js（KnockoutJS）

<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>

反应成分

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"));

我是ReactJS新手。如何显示ReactJS组件中的基因敲除应用程序页面？无法在ReactJS中重写KnockoutJS页面。

谢谢。

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'));
    }

案例2）-想要将已经存在的KO页面绑定到React并保留要在实际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）如果您想使用observable加载常规的react组件：我的意思是，如果您希望一些可观察到的数据可以在react中使用。

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

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

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

如果您不在durandel，则可能需要添加ko.applybinding自己，否则会没事的。

在控制台窗口中查找错误消息（如果有的话），可能有一些。

对不起，如果我的答案格式不正确。

ReactJS：如何在React组件中包装基因敲除页面

1 个答案: