javascript - Update component properties externally -
i trying wrap head around react. requrment have 2 components, both displaying same json data in 2 different ways. want call web api 2 method, return json result , re-render components variable holding data changes. since these 2 components need reflect same data, didn't want make $.ajax call twice. did small test component simulate part of process , can't figure out.
i have following jsx code:
var data = {text: "some text..."}; var testcomponent = react.createclass({ render: function() { return ( <div classname="testcomponent"> hello, world! 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); in setinterval method have tried using both testcomponent.setprops({data: data}); directly , tried calling testcomponent.updatedata(); both undefined error. tried react.testcomponent. , undefined.
i think simple use case, can't find example of anywhere. see lot of talk doing this, no code samples. maybe i`m going wrong?
you're trying call methods on testcomponent class; instead should use instance returned react.rendercomponent. work:
var component = react.rendercomponent( <testcomponent data={data} />, document.getelementbyid('content') ); setinterval(function() { data = {text: "some other text..."}; component.setprops({data: data}); }, 1000); though preferred more declarative approach of calling rendercomponent again on same node, so:
function rendertest(data) { react.rendercomponent( <testcomponent data={data} />, document.getelementbyid('content') ); } rendertest({text: "some text..."}); setinterval(function() { rendertest({text: "some other text..."}); }, 1000); hope helps.
Comments
Post a Comment