<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="container">

    <!-- This element's contents will be replaced with your component. -->

</div>

<hr/>

<div id="container1">

    <!-- This element's contents will be replaced with your component. -->

</div>

<hr/>

<!--在容器页面中操作Foo的方法-->

<div onclick="clickSpan()" style="border:#CCCCCC 1px solid">click me to change Foo's age to 20 from container page</div>

var Foo=React.createClass({

//setGender是部件Foo向外公开的一个方法，用于操作Foo的gender值

        setAge:function(age){

            var stateVal={};

            if(age>20)

            {

                stateVal={gender:'male',age:age}

            }

            else

            {

                stateVal={gender:'femle',age:age}

            }

            this.setState(stateVal);

        },

        getInitialState:function(){

            return {

                age:0,

                gender:'female'

            }

        },

    render:function(){

        return <div>

            <div>

            <strong>{this.props.componentName}</strong>

            </div>

            <div>

            gender:<input value={this.state.gender}  type="text" ref="txt"  />

            </div>

            <div>

            age:{this.state.age}

            </div>

        </div>

    }

});

var Bar = React.createClass({

    onAgeChange:null,

    render: function() {

        return <div>

            <div onClick={this.helloClick}>

               <strong>{this.props.componentName}</strong>(click me to show age value)

            </div>

            <div>

            age:<input onChange={this.onChange} type="text" ref="age"  />

            </div>

            <div>

            age:{this.state.age}

            </div>

        </div>;

    },

    helloClick:function(){

        alert(this.refs.age.getDOMNode().value);

    },

    onChange:function(e){

        if(this.onAgeChange) this.onAgeChange(e.target.value);

        this.state.age=e.target.value;

        this.setState({age: e.target.value});

        //this.forceUpdate();

    },

    getInitialState:function(){

        return {

            age:0

        }

    },

    componentDidMount:function(){

        this.refs.age.getDOMNode().value=this.state.age;

    }

});

var foo=React.render(<Foo componentName="Foo"/>, document.getElementById('container'));

var bar=React.render(<Bar componentName="Bar" />, document.getElementById('container1'));

bar.onAgeChange=function(age){

    foo.setAge(age);

}

function clickSpan(){

// 在容器页面中操作Foo的方法

    foo.setAge(22);

}