当前位置：首页 > React

react是如何传递参数的

2026-01-25 11:49:28React

React 参数传递方式

在 React 中，参数传递主要通过以下几种方式实现，适用于不同场景：

父子组件通信（Props）

父组件通过属性（props）向子组件传递数据：

// 父组件
function Parent() {
  const data = "Hello from Parent";
  return <Child message={data} />;
}

// 子组件
function Child(props) {
  return <div>{props.message}</div>;
}

子父组件通信（回调函数）

通过回调函数实现子组件向父组件传递数据：

// 父组件
function Parent() {
  const handleData = (data) => {
    console.log("Received:", data);
  };
  return <Child onSendData={handleData} />;
}

// 子组件
function Child({ onSendData }) {
  return <button onClick={() => onSendData("Child Data")}>Send</button>;
}

Context API

跨层级组件共享数据：

const MyContext = React.createContext();

// 提供者组件
function Provider() {
  return (
    <MyContext.Provider value={{ sharedData: "Global Data" }}>
      <Consumer />
    </MyContext.Provider>
  );
}

// 消费者组件
function Consumer() {
  const context = React.useContext(MyContext);
  return <div>{context.sharedData}</div>;
}

状态管理工具（Redux/Zustand）

全局状态管理库实现任意组件间通信：

// Redux示例
import { useSelector, useDispatch } from 'react-redux';

function Component() {
  const data = useSelector(state => state.data);
  const dispatch = useDispatch();

  const updateData = () => {
    dispatch({ type: 'UPDATE', payload: "New Data" });
  };
}

路由参数（React Router）

通过URL传递参数：

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

// 组件获取参数
function User({ match }) {
  return <div>User ID: {match.params.id}</div>;
}

Refs 传递

直接访问DOM或组件实例：

function Parent() {
  const childRef = React.useRef();

  const handleClick = () => {
    childRef.current.doSomething();
  };

  return (
    <>
      <Child ref={childRef} />
      <button onClick={handleClick}>Trigger Child</button>
    </>
  );
}

// 需使用forwardRef包装子组件
const Child = React.forwardRef((props, ref) => {
  React.useImperativeHandle(ref, () => ({
    doSomething: () => console.log("Child method called")
  }));
  return <div>Child Component</div>;
});

自定义Hook共享逻辑

封装可复用的状态逻辑：

react是如何传递参数的

function useCustomHook(initialValue) {
  const [value, setValue] = React.useState(initialValue);
  const double = () => setValue(v => v * 2);
  return { value, double };
}

function Component() {
  const { value, double } = useCustomHook(1);
  return <button onClick={double}>{value}</button>;
}