react组件之间如何传值
父子组件传值（Props）
父组件通过props向子组件传递数据。父组件中定义属性，子组件通过this.props（类组件）或直接解构（函数组件）接收。
// 父组件
function Parent() {
const data = "Hello from Parent";
return <Child message={data} />;
}
// 子组件（函数式）
function Child({ message }) {
return <div>{message}</div>;
}子父组件传值（回调函数）
父组件将函数作为prop传递给子组件，子组件调用该函数并传递参数实现反向通信。
// 父组件
function Parent() {
const handleData = (data) => {
console.log(data);
};
return <Child onSend={handleData} />;
}
// 子组件
function Child({ onSend }) {
return <button onClick={() => onSend("Data from Child")}>Send</button>;
}Context API跨层级传值
通过React.createContext创建上下文，Provider提供数据，Consumer或useContext消费数据。
const MyContext = React.createContext();
function App() {
return (
<MyContext.Provider value="Global Data">
<ComponentA />
</MyContext.Provider>
);
}
function ComponentA() {
const value = useContext(MyContext);
return <div>{value}</div>;
}状态管理工具（Redux/Zustand）
使用第三方库集中管理状态，各组件通过dispatch更新状态或selector获取状态。
// Redux示例
import { useSelector } from 'react-redux';
function Component() {
const data = useSelector(state => state.data);
return <div>{data}</div>;
}事件总线（Event Emitter）
通过自定义事件实现任意组件间通信，适用于非父子关系的深层组件。
import EventEmitter from 'events';
const emitter = new EventEmitter();
// 发布者组件
emitter.emit("eventName", data);
// 订阅者组件
useEffect(() => {
emitter.on("eventName", (data) => {
console.log(data);
});
return () => emitter.off("eventName");
}, []);Refs引用传递
通过forwardRef将ref传递给子组件，直接访问DOM节点或组件实例。
const Child = forwardRef((props, ref) => {
return <div ref={ref}>Child</div>;
});
function Parent() {
const ref = useRef();
useEffect(() => {
console.log(ref.current);
}, []);
return <Child ref={ref} />;
}
