7.React中的函数及父子级组件数据通信

Jsx->{js语句}，

一、最基础的数据传递

二、传递函数

三、传递函数，并且函数传参

四、组件重复调用

1、基础组件重复调用

显示结果

2、组件传值：父组件传递数据到子组件

显示结果

3、父组件传递变化值到子组件，颜色随意变化

4、组件通信：在组件之内还是通过this.props读取属性

script type="text/babel">          class Child extends React.Component{                    render(){                             return (                                      我是子组件---{this.props.setMsg}                             )                    }          }          class Parent extends React.Component{                    constructor(){                             super();                             this.state={                                      msg:"我是父组件数据"                             }                    }                    render(){                             return (                                      我是父组件                                                                                                       )                    }          }          ReactDOM.render(,app);

 

5、父组件的数据改变了，子组件的数据也会改变

 

6、子组件通过调用父组件传递过去的函数，进而通过函数调用传递子组件数据到父组件

 

五、烧水的一个demo