我试图围绕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
。
我认为这是一个简单的用例,但我无法在任何地方找到这样的例子。我看到很多关于这样做的讨论,但没有代码样本。也许我说这一切都错了?
答案 0 :(得分:4)
您尝试在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);
希望有所帮助。