react组件如何传输值
父组件向子组件传值
通过 props 传递数据，父组件在子组件标签上定义属性，子组件通过 props 接收。
父组件代码示例
function ParentComponent() {
const data = "Hello from Parent";
return <ChildComponent message={data} />;
}子组件代码示例
function ChildComponent(props) {
return <div>{props.message}</div>;
}子组件向父组件传值
通过回调函数实现。父组件传递函数给子组件，子组件调用该函数并传入参数。
父组件代码示例
function ParentComponent() {
const handleData = (childData) => {
console.log(childData);
};
return <ChildComponent onSendData={handleData} />;
}子组件代码示例
function ChildComponent({ onSendData }) {
const sendData = () => {
onSendData("Data from Child");
};
return <button onClick={sendData}>Send Data</button>;
}兄弟组件间传值
通过状态提升或全局状态管理（如 Context、Redux）。将共享状态定义在共同的父组件中，通过 props 传递。
共享状态的父组件代码示例
function ParentComponent() {
const [sharedData, setSharedData] = useState("Initial Data");
return (
<>
<SiblingA data={sharedData} />
<SiblingB onUpdateData={setSharedData} />
</>
);
}使用 Context API 跨层级传值
创建 Context 并包裹组件树，任意子组件可通过 useContext 获取值。
Context 定义示例
const MyContext = createContext();
function App() {
return (
<MyContext.Provider value={"Global Data"}>
<ChildComponent />
</MyContext.Provider>
);
}
function ChildComponent() {
const contextValue = useContext(MyContext);
return <div>{contextValue}</div>;
}使用 Redux 全局状态管理
通过 store 存储数据，组件通过 useSelector 读取和 useDispatch 更新状态。
Redux 示例代码
// Store 配置
const store = configureStore({
reducer: {
data: dataReducer,
},
});
// 组件中使用
function Component() {
const data = useSelector((state) => state.data);
const dispatch = useDispatch();
const updateData = () => dispatch({ type: "UPDATE_DATA" });
return <button onClick={updateData}>Update</button>;
}通过路由参数传值
使用 react-router-dom 传递 URL 参数或状态。
路由传参示例
// 传递参数
<Link to="/user/123">User</Link>
// 接收参数
function UserPage() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}
