React组件通信全解析：父传子、子传父与跨级通信

本文主要介绍了React组件之间通讯的多种方式，包括父组件向子组件传值、子组件向父组件传值以及跨级组件（祖孙组件）之间的通信。 在React开发中，组件间的通信是必不可少的。以下是React组件通讯的几种常见方法： 1、父组件向子组件传值 在React中，父组件向子组件传递数据通常是通过`props`属性实现的。例如，父组件`Parent`可以通过将`dataList`作为属性传递给子组件`Child`，如以下代码所示： ```jsx // 父组件 Parent import React from 'react'; import Child from './Child'; const dataList = [ { id: '001', value: '张三' }, { id: '002', value: '李四' } ]; const Parent = props => { return ( <ul> <Child dataList={dataList} /> </ul> ); }; export default Parent; // 子组件 Child import React from 'react'; const Child = props => { return ( <React.Fragment> {props.dataList.map(item => ( <li key={item.id}>{item.value}</li> ))} </React.Fragment> ); }; export default Child; ``` 在这个例子中，`dataList`数组被传递给`Child`，然后子组件可以访问并渲染这些数据。 2、子组件向父组件传值 子组件想要改变父组件的状态时，通常通过调用父组件传递下来的回调函数来实现。父组件会提供一个更新状态的方法，子组件通过事件处理函数调用这个方法。例如： ```jsx // 父组件 Parent import React, { useState } from 'react'; import Child from './Child'; const Parent = props => { const [count, setCount] = useState(0); return ( <Child count={count} setCount={setCount} /> ); }; export default Parent; // 子组件 Child import React from 'react'; const Child = props => { return ( <React.Fragment> <button onClick={() => { props.setCount(props.count - 1); }}>-</button> <span>{props.count}</span> <button onClick={() => { props.setCount(props.count + 1); }}>+</button> </React.Fragment> ); }; export default Child; ``` 在这个例子中，子组件通过按钮点击事件改变父组件的`count`状态。 3、跨级组件通信（祖孙组件） 当需要在非直接父子关系的组件间通信时，可以使用React的`Context API`。`Context`提供了一个全局变量，使得任何层级的组件都能访问到。创建一个`Context`，然后在祖组件中创建并提供，孙子组件可以消费这个`Context`。 ```jsx // 创建一个Context import React, { createContext, useContext, useState } from 'react'; const MyContext = createContext(); // 祖组件GrandParent import React from 'react'; import Parent from './Parent'; import { MyContext } from './MyContext'; const GrandParent = () => { const [sharedValue, setSharedValue] = useState('初始值'); return ( <MyContext.Provider value={{ sharedValue, setSharedValue }}> <Parent /> </MyContext.Provider> ); }; export default GrandParent; // 父组件Parent import React from 'react'; import Child from './Child'; const Parent = () => { return <Child />; }; export default Parent; // 孙子组件Child import React, { useContext } from 'react'; import { MyContext } from './MyContext'; const Child = () => { const { sharedValue, setSharedValue } = useContext(MyContext); return ( <React.Fragment> <p>共享值: {sharedValue}</p> {/* 更新共享值的操作 */} </React.Fragment> ); }; export default Child; ``` 通过`Context API`，即使相隔多层的组件也能轻松地共享数据，避免了“props drilling”问题。 总结来说，React组件间的通信是通过props传递、回调函数以及Context API来实现的。理解并熟练掌握这些方法，有助于构建更灵活、可维护的React应用。