react.js中的数据绑定

Question

我想将我的全局变量testdata绑定到react 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

请允许我重新表述您的问题：

当外部数据更改时，我该如何重新呈现？

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

获取/设置

一种方法是使用吸气剂和吸气剂。

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