component commucation

by leftstick

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var B = React.createClass({
  render: function() {
    return <div style={this.props.style}>This is BBBB</div>;
  }
});

var C = React.createClass({
  render: function() {
    return <div style={this.props.style}>This is CCCC</div>;
  }
});

var D = React.createClass({
  propTypes: {
    onHide: React.PropTypes.func
  },
  handleClick: function(e){
      this.props.onHide();
  },
  render: function() {
    return (<div style={this.props.style}><span>This is DDDD</span><button onClick={ this.handleClick }>Hide</button></div>);
  }
});

var A = React.createClass({
  getInitialState: function() {
    return {style: {
        display: 'block'
    }};
  },
  handleHide: function(){
      this.setState({
        style: {
            display: 'none'
        }
      });
  },
  render: function() {
    console.log(this.state.style)
    return (<div>
               This is AAA
               <B style={ this.state.style }></B>
               <C style={ this.state.style }></C>
               <D style={ this.state.style } onHide={ this.handleHide }></D>
            </div>);
  }
});

var Hello = React.createClass({
  render: function() {
    return (<div>
               <span>This is HELLO</span>
               <A></A>
            </div>);
  }
});


ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);