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