react如何传数据
React 数据传递方法
在 React 中，数据传递主要通过以下几种方式实现，适用于不同场景：
父组件向子组件传递数据
使用 props 将数据从父组件传递给子组件。父组件在子组件标签上添加属性，子组件通过 props 接收数据。
父组件示例：
<ChildComponent data={someData} />子组件示例：
function ChildComponent(props) {
return <div>{props.data}</div>;
}子组件向父组件传递数据
通过回调函数实现。父组件传递一个函数给子组件，子组件调用该函数并传入数据。
父组件示例：
function handleData(data) {
console.log(data);
}
<ChildComponent onData={handleData} />子组件示例：
function ChildComponent({ onData }) {
return <button onClick={() => onData("Data from child")}>Send</button>;
}兄弟组件间传递数据
通过状态提升（Lifting State Up）实现。将共享状态提升到最近的共同父组件，通过 props 传递数据和回调函数。
父组件示例：
function Parent() {
const [sharedData, setSharedData] = useState("");
return (
<>
<ChildA onData={setSharedData} />
<ChildB data={sharedData} />
</>
);
}跨层级组件传递数据
使用 Context API 或状态管理库（如 Redux）。Context 适用于全局或深层嵌套数据共享。
创建 Context：
const DataContext = createContext();
function App() {
return (
<DataContext.Provider value={{ data, setData }}>
<ChildComponent />
</DataContext.Provider>
);
}使用 Context：
function ChildComponent() {
const { data } = useContext(DataContext);
return <div>{data}</div>;
}路由参数传递数据
通过 React Router 的 URL 参数或状态传递数据。
URL 参数示例：
<Route path="/details/:id" component={Details} />在组件中获取：
const { id } = useParams();状态传递示例：
<Link to={{ pathname: "/details", state: { data } }} />在组件中获取：
const { state } = useLocation();使用 Refs 传递数据
通过 useRef 或 createRef 直接访问组件实例或 DOM 节点。
示例：
const inputRef = useRef();
function Parent() {
return <Child ref={inputRef} />;
}
function Child({ ref }) {
ref.current = { method: () => {} };
}选择合适的方法取决于组件关系和数据共享范围。简单场景用 props 和回调，复杂场景考虑 Context 或状态管理工具。
