什么是React.FC | 封装ant design弹框组件之:ant design 修改密码弹框组件

发布时间:2024年01月05日

一、什么是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 可以提供更严格的类型检查,并帮助捕获潜在的错误。它还可以让代码更易读和理解,因为它清晰地定义了函数组件的输入和输出。

组件的 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,我们可以在父组件和子组件之间传递数据、配置组件的行为,并实现组件之间的交互。

二、封装ant design弹框组件之: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.useForm();

  return (
    <Modal
      title="修改密码"
      visible={
   visible}
      onCancel={
   onCancel}
      onOk={
   onOk}
    >
      <Form form={
   form}>
        <Form.Item
          name="oldPassword"
          label="旧密码"
          rules={
   [{
    required: true, message: '请输入旧密码' }]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item
          name="newPassword"
          label="新密码"
          rules={
   [{
    required: true, message: '请输入新密码' }]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item
          name="confirmPassword"
          label="确认密码"
          rules={
   [{
    
文章来源:https://blog.csdn.net/inthat/article/details/135378014
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。