当前位置：首页 > React

react函数组件如何传参

2026-01-26 03:00:21React

传递参数的方式

React函数组件可以通过props传递参数。父组件在调用子组件时，通过属性名传递数据，子组件通过函数的第一个参数（通常命名为props）接收。

父组件传递参数示例：

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

子组件接收参数示例：

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

解构props参数

在子组件中可以直接解构props对象，提取需要的属性：

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

默认参数设置

可以为props参数设置默认值，当父组件未传递对应属性时使用：

function ChildComponent({ greeting = "Default greeting" }) {
  return <div>{greeting}</div>;
}

传递多个参数

父组件可以同时传递多个参数：

function ParentComponent() {
  return <ChildComponent 
           name="Alice" 
           age={25} 
           hobbies={['reading', 'swimming']} 
         />;
}

子组件接收多个参数：

function ChildComponent({ name, age, hobbies }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Hobbies: {hobbies.join(', ')}</p>
    </div>
  );
}

传递函数作为参数

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

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

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

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

使用children prop

通过props.children可以传递组件之间的嵌套内容：

react函数组件如何传参

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

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