当前位置：首页 > React

react中组件如何传出参数

2026-01-25 07:39:16React

传递参数的基本方法

在React中，父组件向子组件传递参数通常通过props实现。父组件在渲染子组件时，通过属性形式传递数据。

父组件代码示例：

function ParentComponent() {
  const data = "Hello from parent";
  return <ChildComponent message={data} />;
}

子组件接收参数代码示例：

react中组件如何传出参数

function ChildComponent(props) {
  return <div>{props.message}</div>;
}

使用解构赋值简化props

ES6的解构赋值可以简化子组件中props的访问方式。

function ChildComponent({ message }) {
  return <div>{message}</div>;
}

传递多个参数

父组件可以同时传递多个参数给子组件。

react中组件如何传出参数

function ParentComponent() {
  const user = {
    name: "John",
    age: 30
  };
  return <UserProfile {...user} />;
}

传递函数作为参数

父组件可以将函数作为参数传递给子组件，实现子组件向父组件通信。

function ParentComponent() {
  const handleClick = () => {
    console.log("Button clicked in child");
  };

  return <ChildComponent onClick={handleClick} />;
}

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}

使用Context跨层级传递参数

对于深层嵌套组件，可以使用Context避免逐层传递props。

const MyContext = React.createContext();

function App() {
  return (
    <MyContext.Provider value="Context Value">
      <ParentComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const value = React.useContext(MyContext);
  return <div>{value}</div>;
}

使用children prop传递内容

通过children prop可以传递组件之间的嵌套内容。

function ParentComponent() {
  return (
    <ChildComponent>
      <div>This content will be passed as children</div>
    </ChildComponent>
  );
}

function ChildComponent({ children }) {
  return <div>{children}</div>;
}