react-组件间的通讯

一、父传子 父组件在使用子组件时，提供要传递的数据子组件通过props接收数据 class Parent extends React.Component { render() { return ( <div> <div>我是父组件</div> <Child name="张" age={16} /> </div> ) } } const Child = props => { return ( <div> <div>我是子组件</div> <div> 从父组件接收来的数据： {props.name}-{props.age} </div> </div> ) } 二、子传父 父组件在使用子组件时，提供一个回调函数，用于接收数据子组件通过props调用回调函数，将要传递的数据作为参数传递给回调函数 class Parent extends React.Component { getChildMsg = (msg) => { console.log('从子组件接收来的数据：', msg) } render() { return ( <div> <div>我是父组件</div> <Child getMsg={this.getChildMsg} /> </div> ) } } const Child = props => { handleClick = (msg) => { this.props.getMsg('123abc') } return ( <div> <div>我是子组件</div> <button onClick={this.handleClick}> 点我，给父组件传递数据 </button> </div> ) } 三、无关组件通讯 调用 React.createContext() 创建 Provider 和 Consumer 两个组件使用Provider 组件作为父节点，设置value属性，表示要传递的数据调用Consumer 组件接受数据 import React from 'react' const { Provider, Consumer } = React.createContext() class Parent extends React.Component { render() { return ( <Provider value="red"> <div> 我是Parent <Child /> </div> </Provider> ) } } const Child = props => { return ( <div> 我是Child <Grandson /> </div> ) } const Grandson= props => { return ( <div> 我是Grandson <Consumer>{data => 我是Parent接收来的数据: {data}}</Consumer> </div> ) } export default Parent 四、组件间的通讯demo 代码 import React from 'react' import './index.css' import PropTypes from 'prop-types' /** * 组件间的通信demo */ // 创建context得到提供和消费两个组件，方便无关组件之间的通信 // Provider设置value属性，表示要传递的数据 // Consumer接收数据 const { Provider, Consumer } = React.createContext() class Communication extends React.Component { render() { return ( <Provider value="red"> <div className="first"> 我是first <Node name="张" age={16} /> </div> </Provider> ) } } const Node = props => { return ( <div className="second"> <div>我是second-Node</div> <div> 父组件first接收来的数据: {props.name}-{props.age} </div> <SubNode getMsg={msg => { console.log('second-Node接收到子组件third-SubNode数据:', msg) }} /> </div> ) } // Node组件 添加props校验 Node.propTypes = { name: PropTypes.string.isRequired, // string类型，必填 age: PropTypes.number, // number类型 } // Node组件 添加props默认值 Node.defaultProps = { age: 18, } const SubNode = props => { return ( <div className="third"> <div>我是third-SubNode</div> <button onClick={() => { props.getMsg('三儿') }}> 点我给父组件second-Node传值 </button> <Child>我是子节点</Child> </div> ) } const Child = props => { return ( <div className="fourth"> <div>我是fourth-Child</div> <Consumer>{data => <span>我是first接收来的数据: {data}</span>}</Consumer> <div>组件标签的子节点：{props.children}</div> </div> ) } export default Communication 效果

输出