从外部更新组件属性

Update component properties externally

本文关键字：属性 组件 更新 从外部      更新时间：2023-09-26

我想把我的头绕在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。

我认为这是一个简单的用例，但我找不到这样的例子。我看到很多关于这样做的讨论，但没有代码示例。也许我做错了?

你试图调用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);

希望对你有帮助。

相关文章：