更新组件的外部属性

我想围绕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

更新组件的外部属性

回答

相关问题