react组件如何传递参数

传递参数的方式

在React中，组件之间传递参数主要通过props实现。父组件通过props向子组件传递数据，子组件通过props接收数据。

父组件传递参数

父组件在调用子组件时，通过属性形式传递参数。参数可以是任意类型，包括字符串、数字、对象、数组、函数等。

function ParentComponent() {
  const name = "John";
  const age = 30;
  const user = { id: 1, email: "john@example.com" };

  return (
    <ChildComponent 
      name={name} 
      age={age} 
      user={user}
    />
  );
}

子组件接收参数

子组件通过函数参数或this.props接收父组件传递的参数。函数组件直接通过参数接收，类组件通过this.props访问。

函数组件接收方式：

function ChildComponent(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
      <p>Email: {props.user.email}</p>
    </div>
  );
}

类组件接收方式：

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <p>Name: {this.props.name}</p>
        <p>Age: {this.props.age}</p>
        <p>Email: {this.props.user.email}</p>
      </div>
    );
  }
}

解构props

可以使用解构赋值简化props的访问，使代码更简洁。

function ChildComponent({ name, age, user }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Email: {user.email}</p>
    </div>
  );
}

默认参数值

可以为props设置默认值，当父组件未传递相应参数时使用默认值。

function ChildComponent({ name = "Guest", age = 18, user = {} }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Email: {user.email || "N/A"}</p>
    </div>
  );
}

传递函数

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

function ParentComponent() {
  const handleClick = (message) => {
    console.log(message);
  };

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

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

使用children prop

通过children prop可以传递组件或元素作为子内容。

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

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