Question

我试图围绕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。

我认为这是一个简单的用例，但我无法在任何地方找到这样的例子。我看到很多关于这样做的讨论，但没有代码样本。也许我说这一切都错了？

Answer 1

您尝试在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);

希望有所帮助。

外部更新组件属性

1 个答案: