React的组件协同使用实现方式

// 父组件 Parent
export default class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      message: '传给子组件的消息'
    }
  }

  // 消息回调
  onMessage(messageFromChildren) {
    console.log(messageFromChildren);
  }

  render() {
    const { message } = this.state;
    return (
      <div>
        <Children message={ message } onMessage={ this.onMessage.bind(this) } />
      </div>
    );
  }
}

// 子组件 Children
export default class Children extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick() {
    this.props.onMessage('来自子组件的消息');
  }

  render() {
    const { message } = this.props;
    return (
      <div>
        <p>{ message }</p>
        <button onClick={ this.handleClick.bind(this) }>click</button>
      </div>
    );
  }
}

// 父组件 Parent
export default class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      messageFromA: '',
      messageFromB: ''
    }
  }

  onMessage(messageFromChildren, from) {
    console.log(messageFromChildren);

    this.setState({
      [from == 'A' ? 'messageFromA' : 'messageFromB']: messageFromChildren
    });
  }

  render() {
    const { messageFromA,  messageFromB} = this.state;
    return (
      <div>
        <ChildrenA message={ messageFromB } onMessage={ this.onMessage.bind(this) } />
        <ChildrenB message={ messageFromA } onMessage={ this.onMessage.bind(this) } />
      </div>
    );
  }
}

// 子组件ChildrenA
export default class ChildrenA extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick() {
    this.props.onMessage('来自A子组件的消息', 'A');
  }

  render() {
    const { message } = this.props;
    return (
      <div className="p-a b-a">
        <p>{ message }</p>
        <button onClick={this.handleClick.bind(this)}>clickA</button>
      </div>
    );
  }
}

// 子组件 ChildrenB
export default class ChildrenB extends React.Component {
  constructor(props) {
    super(props);
  }

  handleClick() {
    this.props.onMessage('来自B子组件的消息', 'B');
  }

  render() {
    const { message } = this.props;
    return (
      <div className="p-a b-a">
        <p>{ message }</p>
        <button onClick={this.handleClick.bind(this)}>clickB</button>
      </div>
    );
  }
}

// Parent组件
  render() {
    const { messageFromA,  messageFromB} = this.state;
    return (
      <div>
        <ChildrenA message={ messageFromB } onMessage={ this.onMessage.bind(this) } />
        <ChildrenB message={ messageFromA } onMessage={ this.onMessage.bind(this) } />
        <ChildrenC />
      </div>
    );
  }

// 子组件 ChildrenC
export default class ChildrenC extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidUpdate() {
    console.log('ChildrenC updated');
  }


  render() {
    return (
      <div>ChildrenC</div>
    );
  }
}

var DefaultNameMixin = {
    getDefaultProps: function () {
        return {name: "Tom"};
    }
};

var DefaultCommonMixin = {
    mixins:[DefaultNameMixin], //use Mixin
    getDefaultProps: function () {
        return {food: "rice"};
    }
};

var Component = React.createClass({
    mixins:[DefaultCommonMixin], //use Mixin
    render:function(){
        return <h1>{this.props.name} like {this.props.food}</h1>;
    }
}); 

ReactDOM.render(
    <Component/>,
    document.getElementById("example")
);

'use strict';  
  
// 构建对象{value,requestChange}，value为初始值，requestChange为方法，须手动调用  
// 在本模块中，value为state[key]的初始值，requestChange用于更新state[key]  
var ReactLink = require('./ReactLink');  
  
// 设定属性key后，返回函数，该函数接受value，内部调用组件component.setState方法，更新state[key]=value  
var ReactStateSetters = require('./ReactStateSetters');  
  
  
var LinkedStateMixin = {  
  // ReactStateSetters.createStateKeySetter方法用于构建linkState(key)返回对象的requestChange方法  
  // 实现传值后自动调用setState方法，更新state  
  linkState: function (key) {  
    return new ReactLink(this.state[key], ReactStateSetters.createStateKeySetter(this, key));  
  }  
};  
  
module.exports = LinkedStateMixin;  

import LinkedStateMixin from 'react-addons-linked-state-mixin'

mixins: [React.addons.LinkedStateMixin],

var WithLink = React.createClass({
  mixins: [LinkedStateMixin],
  getInitialState: function() {
    return {message: 'Hello!'};
  },
  render: function() {
    return <input type="text" valueLink={this.linkState('message')} />;
  }
});