父子组件如何进行数据通信:

	父级 -> 子级
		<Parent>
			<Child 属性名={xxx} />
		</Parent>

		this.props....
	子级 -> 父级
		<Child fnCallback={这里是父级的一个函数} />

		子级:

		this.props.fnCallback(xxx)

<script type="text/babel">
    const Child = (props) =>(<div>
        <strong>子级</strong>
        <div>{props.msg}</div>
    </div>)

    class Parent extends React.Component{
        constructor(){
            super();

            this.state={
                msg:'我是父级的数据哦....'
            };
        }
        render(){
            return (<div>
                <h2>welcome ijilu.cn</h2>
                <Child msg={this.state.msg}></Child>
            </div>)
        }
    }

    ReactDOM.render(
        <Parent />,
        document.querySelector('#root')
    )
</script>


<script type="text/babel">
    class Child extends React.Component{
        constructor(){
            super();

            this.state ={
                msg:'我是子级的数据哦...'
            };
        }
        handleClick = () =>{
            this.props.aa(this.state.msg);
        }
        render(){
            return (<div>
                <strong>子级</strong>
                <button onClick={this.handleClick}>按钮</button>
            </div>)
        }
    }

    class Parent extends React.Component{
        constructor(){
            super();
        }
        fn = (args) =>{
            alert(args);
        }
        render(){
            return (<div>
                <h2>welcome ijilu.cn</h2>
                <Child aa={this.fn}></Child>
            </div>)
        }
    }

    ReactDOM.render(
        <Parent />,
        document.querySelector('#root')
    )
</script>


<script type="text/babel">
    class Child extends React.Component{
        constructor(){
            super();

            this.state ={
                msg:'我是子级的数据哦...'
            };
        }
        componentDidMount(){
            this.props.aa(this.state.msg);
        }
        handleClick = () =>{
            this.setState({
                msg:Date.now()
            },()=>{
                this.props.aa(this.state.msg);
            })
        }
        render(){
            return (<div>
                <strong>子级</strong>
                <button onClick={this.handleClick}>按钮</button>
            </div>)
        }
    }

    class Parent extends React.Component{
        constructor(){
            super();

            this.state ={
                a:''
            };
        }
        fn = (args) =>{
            this.setState({
                a:args
            })
        }
        render(){
            return (<div>
                <h2>welcome ijilu.cn {this.state.a}</h2>
                <Child aa={this.fn}></Child>
            </div>)
        }
    }

    ReactDOM.render(
        <Parent />,
        document.querySelector('#root')
    )
</script>