跨组件传参 react

 const Context = React.createContext();
        // console.log(Context.Provider);// 提供者
        // console.log(Context.Consumer);//使用者
        //孙子
       class Son extends React.Component{
            render(){
                return <div className="son">
                    <Context.Consumer>
                        {
                            (data)=>{
                               return <div><p>{data.name}</p>
                               <button 
                               onClick={data.setClassName.bind(this,'新的一天')}
                               >change</button></div>
                            }
                        }
                    </Context.Consumer>
                </div>
            }
        }
        //儿子
        class Parent extends React.Component{
            render(){
                return <div className="parent">
                        <Son />
                </div>
            }
        }
     //父
        class Wrap extends React.Component{
            state = {
                name:'凌晨两点半'
            }
            render(){
                return <div className="wrap">
                <Context.Provider value={{...this.state,setClassName:this.setClassName.bind(this)}}>
                    <Parent />
                </Context.Provider>
                </div>
            }
            setClassName(name){
                this.setState({name})
            }
        }
        ReactDOM.render(<Wrap/>,document.querySelector('#app'))