React函数组件传参

在React中，函数组件（Function Components）是定义组件的一种方式，它们本质上是JavaScript函数，可以接受props（属性）作为参数，并返回React元素。这些props允许你从父组件向子组件传递数据。

传递Props

当你想要从父组件向子组件传递数据时，你可以通过组件标签（即JSX中的元素）的属性来传递这些数据。在子组件中，你可以通过函数的参数来接收这些数据，这个参数按照惯例被命名为props（尽管你可以使用任何有效的变量名）。

父组件

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return (
    <div>
      <h1>我是父组件</h1>
      {/* 向子组件传递数据 */}
      <ChildComponent message="Hello from Parent!" />
    </div>
  );
}

export default ParentComponent;

子组件

import React from 'react';

function ChildComponent(props) {
  // 使用props.message来访问传递的数据
  return (
    <div>
      <h2>我是子组件</h2>
      <p>{props.message}</p>
    </div>
  );
}

export default ChildComponent;

使用解构赋值简化Props

如果你只需要从props中访问几个特定的属性，你可以使用ES6的解构赋值语法来简化代码。

function ChildComponent({ message }) {
  // 直接使用message变量，而不需要通过props.message
  return (
    <div>
      <h2>我是子组件</h2>
      <p>{message}</p>
    </div>
  );
}

传递函数作为Props

除了基本数据类型和对象之外，你还可以将函数作为props传递给子组件。这允许子组件在需要时调用这些函数，从而与父组件进行通信（例如，触发事件处理）。

父组件

function ParentComponent() {
  const handleMessage = (msg) => {
    console.log(msg);
  };

  return (
    <div>
      <ChildComponent handleMessage={handleMessage} />
    </div>
  );
}

子组件

function ChildComponent({ handleMessage }) {
  return (
    <button onClick={() => handleMessage('Hello from Child!')}>
      点击我
    </button>
  );
}

通过这种方式，React的函数组件提供了一种灵活且强大的方式来在组件之间传递数据和函数，从而实现组件间的通信和交互。