react组件如何传输值
传递 Props
父组件通过属性向子组件传递数据。子组件通过 props 接收这些值。
父组件：
<ChildComponent name="John" age={25} />子组件：
function ChildComponent(props) {
return <div>{props.name} is {props.age} years old</div>;
}使用 Context API
适用于跨多层级组件传递数据，避免逐层传递 props。
创建 Context：
const MyContext = React.createContext();提供数据：
<MyContext.Provider value={{ user: 'Alice', role: 'admin' }}>
<ChildComponent />
</MyContext.Provider>消费数据：
function ChildComponent() {
const context = useContext(MyContext);
return <div>{context.user} is {context.role}</div>;
}回调函数传递
父组件通过回调函数接收子组件的数据。
父组件：
function ParentComponent() {
const handleData = (data) => {
console.log(data);
};
return <ChildComponent onData={handleData} />;
}子组件：
function ChildComponent({ onData }) {
const sendData = () => {
onData('Hello from child');
};
return <button onClick={sendData}>Send Data</button>;
}状态管理库
使用 Redux 或 MobX 等库管理全局状态，组件通过连接器或 hooks 获取数据。
Redux 示例：
import { useSelector } from 'react-redux';
function Component() {
const counter = useSelector(state => state.counter);
return <div>{counter}</div>;
}使用 Refs
通过 ref 直接访问子组件实例或 DOM 元素，获取其值。
父组件：
function ParentComponent() {
const childRef = useRef();
const getValue = () => {
console.log(childRef.current.value);
};
return (
<>
<ChildComponent ref={childRef} />
<button onClick={getValue}>Get Value</button>
</>
);
}子组件：
const ChildComponent = forwardRef((props, ref) => {
return <input ref={ref} defaultValue="Default" />;
});
