当前位置：首页 > React

react参数如何传递

2026-02-26 04:56:33React

组件间参数传递

父组件向子组件传递参数
通过props传递数据，父组件在子组件标签上定义属性，子组件通过this.props（类组件）或props（函数组件）接收。

// 父组件
<ChildComponent name="John" age={25} />

// 子组件（函数式）
function ChildComponent(props) {
  return <div>{props.name}, {props.age}</div>;
}

子组件向父组件传递参数
父组件通过props传递回调函数，子组件调用该函数并传入参数。

// 父组件
function handleData(data) {
  console.log(data);
}
<ChildComponent onData={handleData} />

// 子组件
<button onClick={() => props.onData("Hello")}>Send</button>

跨层级参数传递

Context API
使用React.createContext创建上下文，通过Provider传递数据，子组件通过useContext或Context.Consumer获取。

react参数如何传递

const MyContext = React.createContext();
function App() {
  return (
    <MyContext.Provider value="Global Data">
      <Child />
    </MyContext.Provider>
  );
}
function Child() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

状态管理库（Redux/Zustand）
通过全局store管理数据，组件通过useSelector或connect获取状态。

// Redux示例
import { useSelector } from 'react-redux';
function Component() {
  const data = useSelector(state => state.data);
  return <div>{data}</div>;
}

路由参数传递

动态路由参数
通过路由配置（如React Router）传递参数，组件通过useParams获取。

react参数如何传递

// 路由配置
<Route path="/user/:id" component={User} />

// 组件内获取
const { id } = useParams();

查询字符串
通过URLSearchParams或useLocation解析查询参数。

const location = useLocation();
const query = new URLSearchParams(location.search);
const name = query.get('name');

特殊场景参数传递

Ref传递
使用forwardRef转发ref到子组件，直接访问DOM或组件实例。

const Child = forwardRef((props, ref) => {
  return <input ref={ref} />;
});

function Parent() {
  const inputRef = useRef();
  return <Child ref={inputRef} />;
}

事件总线（Event Emitter）
通过自定义事件实现非父子组件通信，需谨慎使用以避免维护问题。

// 事件发布
eventEmitter.emit('event', data);

// 事件订阅
useEffect(() => {
  eventEmitter.on('event', handleEvent);
  return () => eventEmitter.off('event', handleEvent);
}, []);