react如何传值
父组件向子组件传值
使用 props 传递数据。父组件通过属性传递值，子组件通过 props 接收。
父组件示例：
import ChildComponent from './ChildComponent';
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("Received from child:", data);
};
return <ChildComponent onData={handleData} />;
}子组件示例：
function ChildComponent({ onData }) {
const sendData = () => {
onData("Data from Child");
};
return <button onClick={sendData}>Send Data</button>;
}兄弟组件间传值
通过状态提升或全局状态管理（如 Context、Redux）实现。
状态提升示例：
function ParentComponent() {
const [sharedData, setSharedData] = useState("");
return (
<>
<ChildA onData={setSharedData} />
<ChildB data={sharedData} />
</>
);
}使用 Context API
适用于跨层级组件传值。
创建 Context：
const MyContext = React.createContext();
function App() {
const value = "Shared Value";
return (
<MyContext.Provider value={value}>
<ChildComponent />
</MyContext.Provider>
);
}子组件消费 Context：
function ChildComponent() {
const value = useContext(MyContext);
return <div>{value}</div>;
}使用 Redux 全局状态管理
适用于复杂应用的多组件共享状态。
安装 Redux：
npm install redux react-redux定义 Store 和 Reducer：
import { createStore } from 'redux';
const reducer = (state = {}, action) => {
switch (action.type) {
case 'UPDATE_DATA':
return { ...state, data: action.payload };
default:
return state;
}
};
const store = createStore(reducer);组件中连接 Redux：
import { Provider, useSelector, useDispatch } from 'react-redux';
function App() {
return (
<Provider store={store}>
<ComponentA />
<ComponentB />
</Provider>
);
}
function ComponentA() {
const dispatch = useDispatch();
const sendData = () => {
dispatch({ type: 'UPDATE_DATA', payload: "New Data" });
};
return <button onClick={sendData}>Update Data</button>;
}
function ComponentB() {
const data = useSelector((state) => state.data);
return <div>{data}</div>;
}
