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