Javascript 从外部更新组件属性

我正试着把我的头缠在

反应上

。我的要求是有两个组件，它们都以两种不同的方式显示相同的JSON数据。我想调用一个

WebAPI2

方法，该方法将返回一个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);

var Data={text:“一些文本…”}；
var TestComponent=React.createClass({
render:function（）{
返回(
你好，世界！我是一个TestComponent.{this.props.data.text}
);
},
updateData:function（）{
this.setProps（{data:data}）；
}
});
React.renderComponent(
,
document.getElementById（'content'）
);
setInterval（函数（）{
数据={text:“其他一些文本…”}；
}, 1000);

在

setInterval

方法中，我尝试了同时使用

TestComponent.setProps（{data:data}）并尝试调用
TestComponent.updateData（）undefined
错误。我还尝试了
React.TestComponent.
，这也是
未定义的

我认为这是一个简单的用例，但我在任何地方都找不到这样的例子。我看到很多关于这样做的讨论，但是没有代码示例。也许我完全弄错了？
您试图调用
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);

var component=React.renderComponent(
,
document.getElementById（'content'）
);
setInterval（函数（）{
数据={text:“其他一些文本…”}；
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);

函数renderTest（数据）{
React.renderComponent(
,
document.getElementById（'content'）
);
}
renderTest（{text:“某些文本…”}）；
setInterval（函数（）{
renderTest（{text:“其他一些文本…”}）；
}, 1000);

希望有帮助。
您正在尝试调用
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);

var component=React.renderComponent(
,
document.getElementById（'content'）
);
setInterval（函数（）{
数据={text:“其他一些文本…”}；
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);

函数renderTest（数据）{
React.renderComponent(
,
document.getElementById（'content'）
);
}
renderTest（{text:“某些文本…”}）；
setInterval（函数（）{
renderTest（{text:“其他一些文本…”}）；
}, 1000);

希望有帮助。
您在渲染函数中的返回值缺少引号，我想？@alnafie否，请参阅关于JSX的信息，这是一个带有嵌入标记的JavaScript扩展：。您在渲染函数中的返回值缺少引号，我想？@alnafie否，请参阅关于JSX的信息，这是一个带有嵌入标记的JavaScript扩展：。谢谢！我想也许我应该再次调用
renderComponent
，但不确定这是否是首选过程。现在我知道了：）@EladLachmi没问题。我刚刚更新了文档，希望能让这更清楚一点：。这个注释对你有帮助吗？@Ben Alpert在我看来，每次更新状态时查询DOM不是很有效。根组件是否可以通过某种方式访问，以便我可以直接在其上运行setState而无需查询DOM？@lcharbon根组件是从ReactDOM.render返回的，但不建议从组件外部返回。setState会破坏封装，使将来更难安全地重构组件。谢谢！我想也许我应该再次调用
renderComponent
，但不确定这是否是首选过程。现在我知道了：）@EladLachmi没问题。我刚刚更新了文档，希望能让这更清楚一点：。这个注释对你有帮助吗？@Ben Alpert在我看来，每次更新状态时查询DOM不是很有效。根组件是否可以通过某种方式访问，以便我可以直接在其上运行setState而无需查询DOM？@lcharbon根组件是从ReactDOM.render返回的，但不建议从组件外部返回.setState，因为它会破坏封装，使将来更难安全地重构组件。