Question

我想将全局变量testdata绑定到反应UI 我确实找到了以下解决方案：

var testdata = 'initial value';

function change() {
    testdata = 'changed value';
}

var Test = React.createClass({
    displayName: 'Test',
    render: function () {
        return React.DOM.div(null,
          React.DOM.div(null, this.props.data )
        );
    }
});

setInterval(function () {
    React.renderComponent(
      Test({ data: testdata }),
      document.getElementById('test')
    );
}, 1000);

我的问题：是否有更优雅的方式（没有setInterval）这样做？

Answer 1

请允许我重新提出您的问题：

当外部数据发生变化时，如何重新呈现反应？

为了做到这一点，您需要能够在外部数据更改时运行一些代码。如果您无法执行此操作，则无法更新视图。没有魔力。

获取/设置

一种方法是使用getter和setter。

renderOnChange({
    key: 'testdata',
    element: document.getElementById('test'),
    render: function(data){ return Test({data: data.testdata}); }
});

function renderOnChange(params){
   var source = params.source || window, key = params.key, element = params.element, render: params.render;
   var value = source[key];
   delete source[key];
   Object.defineProperty(source, key, {
       get: function(){ return value },
       set: function(newValue){ 
           value = newValue;
           React.renderComponent(render(source), element);
       }
   });
}

^{^{我可能会在稍后的}}

中添加更多方法

Answer 2

您可以在更改方法中重新渲染。

function render() {
    var component = Test({ data: testdata });
    var root = document.getElementById('test');
    React.renderComponent(component, root);
}

function change() {
    testdata = 'changed value';
    render();
}

react.js中的数据绑定

2 个答案:

获取/设置