Javascript react.js中的数据绑定

我想将全局变量

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

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

当外部数据更改时，我如何重新渲染

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

获得/设置 一种方法是用一个接受者和接受者

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

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

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