当前位置：首页 > React

react如何传参数

2026-03-30 22:30:31React

React 传递参数的常见方法

父组件向子组件传递参数（Props）
父组件通过属性（props）将数据传递给子组件。子组件通过 props 对象接收参数。

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

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

子组件向父组件传递参数（回调函数）
父组件通过传递回调函数给子组件，子组件调用该函数并传递参数。

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

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

兄弟组件间传递参数（状态提升）
通过将共享状态提升到共同的父组件，再通过 props 传递给兄弟组件。

// 父组件
function Parent() {
  const [sharedState, setSharedState] = useState("Shared Data");
  return (
    <>
      <SiblingA data={sharedState} />
      <SiblingB onUpdate={setSharedState} />
    </>
  );
}

// 子组件A
function SiblingA({ data }) {
  return <div>{data}</div>;
}

// 子组件B
function SiblingB({ onUpdate }) {
  return <button onClick={() => onUpdate("New Data")}>Update</button>;
}

使用 Context API 跨层级传递参数
适用于深层嵌套组件或全局状态共享。

// 创建 Context
const DataContext = React.createContext();

// 父组件提供数据
function Parent() {
  return (
    <DataContext.Provider value="Context Data">
      <Child />
    </DataContext.Provider>
  );
}

// 子组件消费数据
function Child() {
  const data = useContext(DataContext);
  return <div>{data}</div>;
}

通过路由传递参数（React Router）
使用动态路由或查询参数传递数据。

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

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

使用状态管理库（Redux、Zustand 等）
适用于全局状态管理，跨组件共享数据。

react如何传参数

// Redux 示例
// Store 定义
const store = createStore(reducer);

// 组件中获取和更新状态
function Component() {
  const data = useSelector(state => state.data);
  const dispatch = useDispatch();
  return <button onClick={() => dispatch({ type: "UPDATE" })}>Update</button>;
}