react两个组件如何传值
父组件向子组件传值
通过 props 传递数据。父组件在调用子组件时通过属性传递值，子组件通过 props 接收。
父组件示例：
import ChildComponent from './ChildComponent';
function ParentComponent() {
const data = "Hello from Parent";
return <ChildComponent message={data} />;
}子组件示例：
function ChildComponent(props) {
return <div>{props.message}</div>;
}子组件向父组件传值
通过回调函数实现。父组件传递一个函数给子组件，子组件调用该函数并传入参数。
父组件示例：
import ChildComponent from './ChildComponent';
function ParentComponent() {
const handleData = (data) => {
console.log("Received from child:", data);
};
return <ChildComponent onSendData={handleData} />;
}子组件示例：
function ChildComponent({ onSendData }) {
const sendData = () => {
onSendData("Data from Child");
};
return <button onClick={sendData}>Send Data</button>;
}兄弟组件间传值
通过状态提升（Lifting State Up）或全局状态管理（如 Context、Redux）。
状态提升示例：
父组件管理共享状态，通过 props 分发给兄弟组件。
function ParentComponent() {
const [sharedData, setSharedData] = useState("");
return (
<>
<SiblingA onUpdate={setSharedData} />
<SiblingB data={sharedData} />
</>
);
}使用 Context API 跨层级传值
适用于深层嵌套组件或全局数据共享。
创建 Context：
const MyContext = React.createContext();
function App() {
const value = "Global Data";
return (
<MyContext.Provider value={value}>
<ChildComponent />
</MyContext.Provider>
);
}消费 Context：
function ChildComponent() {
const contextValue = useContext(MyContext);
return <div>{contextValue}</div>;
}使用 Redux 管理全局状态
适用于复杂应用的状态管理。
配置 Store：
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);组件中访问状态：
import { useSelector } from 'react-redux';
function Component() {
const data = useSelector(state => state.data);
return <div>{data}</div>;
}使用自定义事件（较少用）
通过 EventEmitter 或自定义事件总线实现非父子组件通信，但 React 官方推荐优先使用上述方法。
