react标签间如何传递值
父组件向子组件传递值
父组件通过 props 向子组件传递数据。在父组件中，将数据作为属性传递给子组件，子组件通过 props 接收。
// 父组件
function ParentComponent() {
const message = "Hello from Parent";
return <ChildComponent message={message} />;
}
// 子组件
function ChildComponent(props) {
return <div>{props.message}</div>;
}子组件向父组件传递值
子组件通过回调函数向父组件传递数据。父组件定义一个函数，通过 props 传递给子组件，子组件调用该函数并传递数据。
// 父组件
function ParentComponent() {
const handleData = (data) => {
console.log(data); // 输出: "Hello from Child"
};
return <ChildComponent onData={handleData} />;
}
// 子组件
function ChildComponent(props) {
const sendData = () => {
props.onData("Hello from Child");
};
return <button onClick={sendData}>Send Data</button>;
}兄弟组件间传递值
兄弟组件间可以通过共同的父组件传递数据。一个子组件通过回调函数将数据传递给父组件，父组件再通过 props 传递给另一个子组件。
// 父组件
function ParentComponent() {
const [data, setData] = useState("");
const handleData = (newData) => {
setData(newData);
};
return (
<>
<ChildComponentA onData={handleData} />
<ChildComponentB data={data} />
</>
);
}
// 子组件A
function ChildComponentA(props) {
const sendData = () => {
props.onData("Data from A");
};
return <button onClick={sendData}>Send Data</button>;
}
// 子组件B
function ChildComponentB(props) {
return <div>{props.data}</div>;
}使用 Context API 跨层级传递值
Context 适用于跨多层组件传递数据，避免逐层传递 props。
// 创建 Context
const MyContext = React.createContext();
// 父组件提供数据
function ParentComponent() {
return (
<MyContext.Provider value="Context Data">
<ChildComponent />
</MyContext.Provider>
);
}
// 子组件消费数据
function ChildComponent() {
const data = useContext(MyContext);
return <div>{data}</div>;
}使用状态管理库（如 Redux）
对于复杂应用，可以使用 Redux 或 Zustand 等状态管理库共享数据。
// 使用 Redux 示例
import { useSelector, useDispatch } from "react-redux";
function ComponentA() {
const dispatch = useDispatch();
const sendData = () => {
dispatch({ type: "SET_DATA", payload: "Redux Data" });
};
return <button onClick={sendData}>Send Data</button>;
}
function ComponentB() {
const data = useSelector((state) => state.data);
return <div>{data}</div>;
}使用自定义事件或 Pub/Sub 模式
通过事件总线或发布订阅模式实现组件间通信，适用于非父子关系的组件。
// 使用 events 库示例
import { EventEmitter } from "events";
const eventBus = new EventEmitter();
// 组件A 发布事件
function ComponentA() {
const emitData = () => {
eventBus.emit("dataEvent", "Event Data");
};
return <button onClick={emitData}>Emit Data</button>;
}
// 组件B 订阅事件
function ComponentB() {
const [data, setData] = useState("");
useEffect(() => {
eventBus.on("dataEvent", (data) => {
setData(data);
});
return () => eventBus.off("dataEvent");
}, []);
return <div>{data}</div>;
}
