react如何传值
React 传值方法
在 React 中，组件间的数据传递可以通过多种方式实现，主要包括父子组件传值、兄弟组件传值以及跨层级组件传值。
父子组件传值
父组件通过 props 向子组件传递数据，子组件通过接收 props 来获取数据。
父组件传递数据：
function ParentComponent() {
const message = "Hello from Parent";
return <ChildComponent message={message} />;
}子组件接收数据：
function ChildComponent(props) {
return <div>{props.message}</div>;
}子组件向父组件传值
子组件通过调用父组件传递的回调函数，将数据传递给父组件。
父组件定义回调函数：
function ParentComponent() {
const handleData = (data) => {
console.log("Data from child:", data);
};
return <ChildComponent onData={handleData} />;
}子组件调用回调函数：
function ChildComponent({ onData }) {
const sendData = () => {
onData("Hello from Child");
};
return <button onClick={sendData}>Send Data</button>;
}兄弟组件传值
兄弟组件之间可以通过共同的父组件进行数据传递，或者使用状态管理工具如 Redux 或 Context API。
通过父组件传递：
function ParentComponent() {
const [data, setData] = useState("");
return (
<>
<ChildA onData={setData} />
<ChildB data={data} />
</>
);
}Context API 跨层级传值
使用 React.createContext 创建上下文，通过 Provider 提供数据，子组件通过 useContext 或 Consumer 获取数据。
创建上下文：
const MyContext = React.createContext();
function App() {
return (
<MyContext.Provider value="Hello from Context">
<ChildComponent />
</MyContext.Provider>
);
}子组件使用数据：
function ChildComponent() {
const value = useContext(MyContext);
return <div>{value}</div>;
}使用状态管理工具（Redux）
Redux 提供全局状态管理，适用于复杂应用中的数据共享。
定义 Redux store：
import { createStore } from 'redux';
const initialState = { message: "" };
function reducer(state = initialState, action) {
switch (action.type) {
case 'SET_MESSAGE':
return { ...state, message: action.payload };
default:
return state;
}
}
const store = createStore(reducer);组件中使用：
import { useSelector, useDispatch } from 'react-redux';
function ComponentA() {
const dispatch = useDispatch();
const setMessage = () => {
dispatch({ type: 'SET_MESSAGE', payload: "Hello from Redux" });
};
return <button onClick={setMessage}>Set Message</button>;
}
function ComponentB() {
const message = useSelector((state) => state.message);
return <div>{message}</div>;
}总结
- 父子组件传值：通过
props和回调函数实现。 - 兄弟组件传值：通过共同的父组件或状态管理工具。
- 跨层级传值：使用 Context API 或 Redux 等状态管理工具。
根据具体场景选择合适的传值方式，可以高效管理组件间的数据流。
