什么是React.FC| 组件接受属性props有什么用 | ant design 封装独立弹框组件之-修改密码弹框组件

一、什么是React.FC

React提供了一个组件类型React.FunctionComponent，可简写React.FC。

• 可以接收一个泛型p，默认是{}
• children，返回一个React.ReactNode，这个children是任何component都拥有的
• 静态属性defaultProps，组件的默认属性，外部可以不传这个属性。

我们使用React.FC来写 React 组件的时候，是不能用setState的，取而代之的是useState()、useEffect等 Hook API

import React from 'react';

type MyComponentProps = {
   
  name: string;
};

const MyComponent: React.FC<MyComponentProps> = ({
     name }) => {
   
  return <div>Hello, {
   name}!</div>;
};

在这个示例中，MyComponent 是一个函数组件，接受一个名为 MyComponentProps 的对象作为参数，并返回一个 JSX 元素。使用 React.FC 声明 MyComponent 的类型，明确了它接受的 props 参数类型为 MyComponentProps。

使用 React.FC 可以提供更严格的类型检查，并帮助捕获潜在的错误。它还可以让代码更易读和理解，因为它清晰地定义了函数组件的输入和输出。

1. 组件的 props 是什么意思

在 React 中，组件的 props（属性）是组件接收的参数，用于传递数据和配置信息给组件。

当我们使用组件时，可以通过在组件标签上添加属性来传递数据给组件。这些属性将作为 props 在组件内部访问和使用。

例如，函数组件 MyComponent，它接收一个名为 name 的属性：

function MyComponent(props) {
   
  return <div>Hello, {
   props.name}!</div>;
}

这个例子中，name 是 MyComponent 组件的一个属性，可以通过 props.name 来访问传递给组件的值。

当我们在父组件中使用 MyComponent 时，可以像这样传递 name 属性的值：

<MyComponent name="Alice" />

我们将字符串 “Alice” 作为 name 属性的值传递给 MyComponent 组件。

通过使用组件的 props，我们可以在父组件和子组件之间传递数据、配置组件的行为，并实现组件之间的交互。

2. 组件接受属性props有什么用

受属性在组件中非常有用，特别是在需要从父组件传递数据或回调函数给子组件的情况下。

通过接受属性，可以将数据或行为从父组件传递到子组件，并在子组件中使用这些属性。这样可以实现组件之间的通信和数据传递。

比如，我有个上传组件 CustomUpload ，我上传完后，需要刷新父组件List列表信息，让用户获取最新的文件列表。您可以通过将刷新列表的回调函数作为属性传递给上传组件，在上传成功后调用该回调函数来刷新列表。

例如，假设您有一个名为 List 的组件，负责显示图片列表。您可以定义一个用于刷新列表的回调函数，并将其作为属性传递给上传组件：

const List: React.FC = () => {
   
  const [fileList, setFileList] = useState<UploadFile[]>([]);

  const handleRefreshList = () => {
   
    // 在这里更新图片列表的数据
    // ...
  };

  return (
    <div>
      {
   /* 显示图片列表 */}
      {
   /* ... */}

      {
   /* 上传组件 */}
      <CustomUpload onUploadSuccess={
   handleRefreshList} />
    </div>
  );
};

在 CustomUpload 组件中，您可以定义一个名为 onUploadSuccess 的属性，并在上传成功后调用该属性作为回调函数：

interface CustomUploadProps {
   
  onUploadSuccess: () => void;
}

const CustomUpload: React.FC<CustomUploadProps> = ({
    onUploadSuccess }) => {
   
  const handleUpload = async (options: any) => {
   
    // 上传图片的逻辑...
    // ...

    // 上传成功后调用回调函数刷新列表
    onUploadSuccess();
  };

  // ...

  return (
    // ...
  );
};

定义了一个名为 CustomImageUpload 的函数组件，它接受一个名为 CustomUploadProps 的属性对象，并返回一个 React 元素。

1. const CustomImageUpload：这是一个使用 const 关键字声明的常量，它表示我们正在定义一个名为 CustomImageUpload 的变量。
2. : React.FC：这是类型注解的一部分，用于明确指定 CustomImageUpload 的类型。React.FC 是一个泛型类型，用于指示我们正在定义一个函数组件。 表示该函数组件接受一个名为 CustomUploadProps 的属性对象。
3. = ({ onUploadSuccess }) => {：这是函数组件的定义，使用箭头函数语法。({ onUploadSuccess }) 表示我们从属性对象中解构出 onUploadSuccess 属性，并将其作为参数传递给函数。{…} 是函数体，包含了函数组件的逻辑和 JSX 结构。

二、ant design 封装独立弹框组件之-修改密码弹框组件

定义修改密码弹框组件

添加了 ChangePasswordModalProps 类型定义，并将 visible 属性添加到组件中。同时，我们在 handleOk 函数中调用传递进来的 onOk 回调函数

ChangePasswordModal.tsx

import React, {
    useState } from 'react';
import {
    Button, Card, Modal, Input, Form, message } from 'antd';

type ChangePasswordModalProps = {
   
  visible: boolean;
  onCancel: () => void;
  onOk: () => void;
};

const ChangePasswordModal: React.FC<ChangePasswordModalProps> = ({
     visible, onCancel, onOk }) => {
   
  const [form] = Form