React组件通信

组件时封闭的，要接收外部数据应该通过props来实现。

传递数据：

给组件标签添加属性：<Hello name="jack" age={19}/>

接受数据:

函数组件：

function Hello(props){

        console.log(props)

        render(){

                return(

                        <div>

                                 <p>姓名：{props.name}</p>

                        </div>

                )

        }

}

类组件：

class Hello extends React.component{

        render(){

                return(

                       <div>

                                <p>姓名：{this.props.name}</p>

                        </div>

                )

        }

}

组件props特点：

1.能给组件传递任何类型的数据。

2.props是只读的对象，只能有点读取数据，不能修改数据。

3.使用类组件时，如果写了构造函数，应该将props传递给super（），否则无法再构造函数中获得props。

组件传递数据的三种方式

父传子：

子传父

 

 

兄弟组件通信 ：通过中间组件，运用上面两种通信组合再一起。

 

Context

 

 Context使用：

1.引入const MyContent = React.createContext().

2.将要传数据的父组件

<MyContent.Provider value={{this.state.name}}>

        <Child></Child>

<MyContent.Provider>

3.接受数据方法一：（只有类组件可以用）

         static contextType= MyContent.

         然和再render（）方法中直接使用{this.content.name}使永接收的数据。

  接受数据方法二：

          再需要用数据的地方直接：

        <MyContent.Consumer>{(value)=>value.name}</Mycontent.ConSumer>