更新組件的外部屬性

我想圍繞React環繞我的頭。我的要求是有兩個組件，它們都以兩種不同的方式顯示相同的JSON數據。我想調用一個Web API 2方法，該方法將返回一個JSON結果，並在保存數據的變量發生變化時立即重新渲染組件。由於這兩個組件需要反映相同的數據，因此我不想讓$.ajax調用兩次。我做了一個小測試組件來模擬這個過程的一部分，我無法弄清楚。更新組件的外部屬性

我有以下jsx代碼：

var Data = {text: "Some Text..."}; 

    var TestComponent = React.createClass({ 
    render: function() { 
    return (
     <div className="testComponent"> 
     Hello, world! I am a TestComponent. {this.props.data.text} 
     </div> 
    ); 
    }, 
    updateData: function() { 
    this.setProps({data: Data}); 
    } 
}); 
React.renderComponent(
    <TestComponent data={Data} />, 
    document.getElementById('content') 
); 

setInterval(function() { 
       Data = {text: "Some other text..."}; 

      }, 1000);

在setInterval方法我都試過直接使用這兩種TestComponent.setProps({data: Data});，也打過電話TestComponent.updateData();既我得到一個undefined錯誤。我也試過React.TestComponent.，這也是undefined。

我會認爲這是一個簡單的用例，但我無法在任何地方找到這個例子。我看到很多關於這樣做的討論，但沒有代碼示例。也許我會談論這一切都是錯誤的？

來源

2014-06-08 Elad Lachmi

您在渲染函數中的返回值是否缺少引號？ – alnafie

@alnafie否，請參閱有關JSX的信息，它是帶有嵌入式標記的JavaScript的擴展：http://facebook.github.io/react/docs/jsx-in-depth.html。 –

您正試圖調用TestComponent類的方法;相反，您應該使用由React.renderComponent返回的實例。像這樣將工作：

var component = React.renderComponent(
    <TestComponent data={Data} />, 
    document.getElementById('content') 
); 

setInterval(function() { 
    Data = {text: "Some other text..."}; 
    component.setProps({data: Data}); 
}, 1000);

雖然優選的是簡單地再次調用renderComponent在同一節點上，像這樣的更聲明方法：

function renderTest(data) { 
    React.renderComponent(
    <TestComponent data={data} />, 
    document.getElementById('content') 
); 
} 

renderTest({text: "Some Text..."}); 
setInterval(function() { 
    renderTest({text: "Some other text..."}); 
}, 1000);

希望有所幫助。

來源

2014-06-08 08:39:20

謝謝！我想也許我應該再次調用'renderComponent'，但不確定這是否是首選的過程。現在我知道:) –

@EladLachmi沒問題。我只是更新了文檔，希望能更清楚一點：[2f61996]（https://github.com/facebook/react/commit/2f61996ec30245182c3b783986c2b3b8f50265a0）。這個筆記會幫助你嗎？ –

@Ben Alpert在我看來，每次更新狀態時查詢DOM都不是很有效。以某種方式訪問根組件，以便我可以直接在其上運行setState而不查詢DOM？ – lcharbon

更新組件的外部屬性

回答

相關問題