react 函数式组件传参

在函数式组件中，可以通过 props 来传递参数。React 会自动将父组件传递给子组件的属性作为参数传入函数式组件。

例如，父组件中有一个名为"message"的属性，可以将它传递给子组件：

function ParentComponent() {
  return (
    <ChildComponent message="Hello, World!" />
  );
}

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

在上述示例中，通过将"message"属性传递给 ChildComponent，ChildComponent 函数式组件就可以通过 props.message 来访问和使用这个参数。

此外，还可以使用对象解构语法来直接取出特定的属性：

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

这样就可以直接使用 message 变量来访问和使用传递的参数。

除了父组件传递给子组件的属性，还可以在组件内部定义默认属性，以便在没有传递对应参数时使用：

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

这样，如果没有传递 message 参数，就会使用默认的 "Default Message" 来代替。

需要注意的是，在函数式组件中，不能使用 this 关键字来访问组件的属性，而是通过 props 参数来传递和访问。