react如何组件传值
React 组件传值方法
父组件向子组件传值（Props）
父组件通过属性（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>;
}子组件向父组件传值（回调函数）
父组件通过回调函数接收子组件的数据。子组件调用父组件传递的函数并传入数据。
父组件代码示例：
import ChildComponent from './ChildComponent';
function ParentComponent() {
const handleData = (data) => {
console.log(data);
};
return <ChildComponent onData={handleData} />;
}子组件代码示例：
function ChildComponent(props) {
const sendData = () => {
props.onData("Data from Child");
};
return <button onClick={sendData}>Send Data</button>;
}兄弟组件传值（状态提升）
将共享状态提升到最近的共同父组件中，通过 props 传递给兄弟组件。
父组件代码示例：
import SiblingA from './SiblingA';
import SiblingB from './SiblingB';
function ParentComponent() {
const [sharedData, setSharedData] = useState("");
return (
<>
<SiblingA setSharedData={setSharedData} />
<SiblingB sharedData={sharedData} />
</>
);
}兄弟组件 A 代码示例：
function SiblingA(props) {
const updateData = () => {
props.setSharedData("Updated Data");
};
return <button onClick={updateData}>Update Data</button>;
}兄弟组件 B 代码示例：
function SiblingB(props) {
return <div>{props.sharedData}</div>;
}跨层级组件传值（Context API）
使用 React.createContext 创建上下文，通过 Provider 提供数据，子组件通过 useContext 或 Consumer 获取数据。
创建 Context：
import { createContext } from 'react';
const MyContext = createContext();
export default MyContext;父组件代码示例：
import MyContext from './MyContext';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const value = "Context Value";
return (
<MyContext.Provider value={value}>
<ChildComponent />
</MyContext.Provider>
);
}子组件代码示例：
import { useContext } from 'react';
import MyContext from './MyContext';
function ChildComponent() {
const contextValue = useContext(MyContext);
return <div>{contextValue}</div>;
}全局状态管理（Redux）
使用 Redux 进行全局状态管理，组件通过 useSelector 获取状态，通过 useDispatch 更新状态。
安装 Redux：
npm install redux react-redux创建 Store：
import { createStore } from 'redux';
const initialState = { data: "" };
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'UPDATE_DATA':
return { ...state, data: action.payload };
default:
return state;
}
};
const store = createStore(reducer);
export default store;父组件代码示例：
import { Provider } from 'react-redux';
import store from './store';
import ChildComponent from './ChildComponent';
function ParentComponent() {
return (
<Provider store={store}>
<ChildComponent />
</Provider>
);
}子组件代码示例：
import { useSelector, useDispatch } from 'react-redux';
function ChildComponent() {
const data = useSelector(state => state.data);
const dispatch = useDispatch();
const updateData = () => {
dispatch({ type: 'UPDATE_DATA', payload: "New Data" });
};
return (
<>
<div>{data}</div>
<button onClick={updateData}>Update Data</button>
</>
);
}
