score:2

Accepted answer

you can pass a handler function from user to game via props:

var user = react.createclass({
    ...
    handlescorechange: function(newscore) {
        this.setstate({totalscore: newscore});
    }

    render: function () {
        return (
            <game handlescorechange={this.handlescorechange.bind(this)} />
        )
    }
});

var game = react.createclass({
    ...
    updateuserscore: function() {
        this.props.handlescorechange(this.state.score); 
    }
}

score:0

i did another hack while waiting for the answer which also works and interesting to share for those who want to be able to call all public functions at root level.

  1. assuming you have croot class

    var croot = react.createclass({
        ...
        anypublicfunction(val){
           ...
        }
    });
    
  2. assign the result of render to a variable.

    var rootcomponent = react.render(
        <croot >..users & games here ...</croot>,
        document.getelementbyid('lobbyarea')
    );
    
  3. use that variable in any child node to call any public function of croot

    rootcomponent.anypublicfunction(val);
    

score:1

in a situation like yours where two components do not share a common parent that can sensibly be used to store the change in state then you should use a store. i was unfamiliar with the concept until recently but people who know much more than me about these things recommend using reflux as it is a streamlined/simplified version of the flux architecture. its simply a place to store and manipulate data independent of any one component but accessible to those components as required.

edit: both flux and reflux seem to have been superseded by the excellent redux.


Related Query

More Query from same tag