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

文章目录

    • 一、什么是React.FC
      • 组件的 props 是什么意思
    • 二、封装ant design弹框组件之:ant design 修改密码弹框组件
      • 定义修改密码弹框组件
      • 使用修改密码弹框组件:
      • [重要]关于提交时候,不同组件 表单数据共享
      • 报错:'Button' cannot be used as a JSX component.

一、什么是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 (<Modaltitle="修改密码"visible={visible}onCancel={onCancel}onOk={onOk}><Form form={form}><Form.Itemname="oldPassword"label="旧密码"rules={[{ required: true, message: '请输入旧密码' }]}><Input.Password /></Form.Item><Form.Itemname="newPassword"label="新密码"rules={[{ required: true, message: '请输入新密码' }]}><Input.Password /></Form.Item><Form.Itemname="confirmPassword"label="确认密码"rules={[{ 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/597604.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JVS规则引擎和智能BI(自助式数据分析)1.3新增功能说明

规则引擎更新功能 新增: 1、数据源新增Excel数据源&#xff1b; Excel数据源功能允许用户将Excel文件作为数据源导入&#xff0c;并进行数据清洗、转换和处理&#xff0c;以实现数据的集成、可视化和深度分析&#xff0c;为决策提供强大支持&#xff0c;同时保持良好的交互性…

新一代爬取JavaScript渲染页面的利器-playwright(一)

Playwright的使用 Playwright是微软在2020年初开源的一款新一代自动化测试工具&#xff0c;其功能和**Selenium**、Pyppeteer类似&#xff0c;都可以驱动浏览器进行自动化操作&#xff0c;但是也具备了Selenium、Pyppeteer不具备的更好的API&#xff0c;是新一代爬取JavaScrip渲…

HbuilderX中的git的使用

原文链接https://blog.csdn.net/Aom_yt/article/details/119924356

CentOs 环境下使用 Docker 部署 Ruoyi-Vue

CentOs 环境下使用 Docker 部署 Ruoyi-Vue RuoYi-Vue 项目下载地址 RuoYi-Vue: &#x1f389; 基于SpringBoot&#xff0c;Spring Security&#xff0c;JWT&#xff0c;Vue & Element 的前后端分离权限管理系统&#xff0c;同时提供了 Vue3 的版本 (gitee.com) Docker 部…

MYSQL分表容量预估:简明指南

随着数据量的日益增长&#xff0c;分表技术成为优化mysql数据库性能的重要策略。本文介绍一种简明有效的预估分表容量大小的方法&#xff0c;帮助开发者和数据库管理员进行有效的资源规划。 背景 在处理大规模数据时&#xff0c;为了优化性能和管理便利&#xff0c;常常采用分…

Java 流程控制语句

程序设计中规定的三种流程结构&#xff0c;即&#xff1a; 顺序结构 程序从上到下逐行地执行&#xff0c;中间没有任何判断和跳转 分支结构 根据条件&#xff0c;选择性地执行某段代码 有 if…else 和 switch-case 两种分支语句 循环结构 根据循环条件&#xff0c;重复性的执…

DRF从入门到精通九(权限控制)

文章目录 一、权限控制模型1) ACL(Access Control List,访问控制列表)2) RBAC(Role-Based Access Control,基于角色的访问控制)应用前后台权限控制实操 3) ABAC(Attribute-Based Access Control,基于属性的访问控制) 一、权限控制模型 1) ACL(Access Control List,访问控制列表…

郑州大学算法设计与分析实验2

判断题 1 #include<bits/stdc.h> using namespace std;const int N 50; int f[N], n;int main() { // freopen("1.in", "r", stdin);ios::sync_with_stdio(false);cin.tie(0);cout.tie(0);cin >> n;f[1] 1; f[2] 1;for(int i 3; i &l…

数字IC后端实现之快速获取innovus中drv violation的所有net list

在Innovus中place_opt_design和optDesign阶段&#xff0c;我们经常会看到如下所示的log提示信息&#xff0c;核心关键词是“ Reasons for remaining drv violations”。而且告诉我们总共有819条net存在drv violation&#xff0c;且无法被工具优化掉。 Reasons for remaining dr…

深入理解 Golang 中的值类型和引用类型

目录 Golang 的内存模型 值类型 引用类型 值类型与引用类型在函数传递中的差异 指针类型&#xff08;Pointer Types&#xff09; 值类型与引用类型的比较 小结 在 Golang 中&#xff0c;数据类型可以分为两大类&#xff1a;值类型&#xff08;Value Types&#xff09;和…

ARM Cortex-Mx 权威指南笔记

用于中断或异常屏蔽特殊寄存器细节 1、PRIMASK 在许多应用中,可能都需要暂时禁止所有中断以执行一些时序关键的任务&#xff0c;此时可以使用PRIMASK寄存器。PRIMASK寄存器只能在特权状态访问。PRIMASK 用于禁止除NMI和 HardFault 外的所有异常它实际上是将当前优先级改为0(最…

图解设计模式-中介者模式(Mediator)

中介者模式 定义 使用一个中介者对象&#xff08;mediator&#xff09;集中封装多个具有依赖/关联关系的对象&#xff08;colleague&#xff0c;同事对象&#xff09;之间的交互&#xff0c;使各对象之间不再互相引用&#xff0c;降低对象之间的强耦合程度&#xff0c;对象之…

CTF之Misc杂项干货

目录 一、常见编码 二、文件分析与处理 三、隐写工具与命令 四、隐写术实例 一、常见编码 1、base家族 2、进制转换 3、摩斯、希尔、凯撒、仿射、栏栅、维吉尼亚、培根、键盘、rabbit、rot13、AES、md5、RSA等 &#xff08;md5、RSA可能不会出现在杂项里&#xff0c;但…

【算法题】38. 外观数列

题目 给定一个正整数 n &#xff0c;输出外观数列的第 n 项。 「外观数列」是一个整数序列&#xff0c;从数字 1 开始&#xff0c;序列中的每一项都是对前一项的描述。 你可以将其视作是由递归公式定义的数字字符串序列&#xff1a; countAndSay(1) "1" countAn…

pytorch集智-1安装与简单使用

1 安装 1.1 简介 pytorch可用gpu加速&#xff0c;也可以不加速。gpu加速是通过cuda来实现&#xff0c;cuda是nvidia推出的一款运算平台&#xff0c;它可以利用gpu提升运算性能。 所以如果要装带加速的pytorch&#xff0c;需要先装cuda&#xff0c;再装pytorch&#xff0c;如…

2023年第2季社区Task挑战赛贡献者榜单

基于FISCO BCOS及Weldentity&#xff0c;实现SSO单点登录服务&#xff1b;提供食品溯源、电商运费险7天退保、电子病历等智能合约库业务场景案例&#xff1b;基于FISCO BCOS更新游戏体验&#xff1b;体验并分析解读最新发布的分布式数据协作管理解决方案DDCMS&#xff0c;提供相…

计算机网络——网关或代理

1. 网关或代理的概念 网络中的代理服务器&#xff08;proxy&#xff09;或网关&#xff08;passerelle&#xff09;的概念。 在OSI模型的各个层次中&#xff0c;代理或网关充当中间实体&#xff0c;可以在不同的层次上提供连接和转发功能。 2. 代理或网关工作层次 在这种配置中…

Java学校教务管理系统源码带微信小程序

运行环境&#xff1a;jdk8mysql5.7IntelliJ IDEAmaven 技术&#xff1a;springbootmybatislayuishirojquery 教务管理系统是一个基于网络的在线管理平台, 帮助学校管理教务系统&#xff0c;用一个帐号解决学校教务教学管理&#xff0c; 灵活的定制符合学校自己实际情况的教务系…

网络连通性批量检测工具

一、背景介绍 企业网络安全防护中&#xff0c;都会要求配置物理网络防火墙以及主机防火墙&#xff0c;加强对网络安全的防护。云改数转之际&#xff0c;多系统上云过程中都会申请开通大量各类网络配置&#xff0c;针对这些复杂且庞大的网络策略开通配置&#xff0c;那么在网络配…

使用Go语言实现RESTful API

RESTful架构是一种设计风格&#xff0c;用于构建网络应用程序的API。它基于HTTP协议&#xff0c;并使用不同的HTTP方法&#xff08;如GET、POST、PUT、DELETE等&#xff09;来处理不同的操作。在Go语言中&#xff0c;我们可以使用标准库中的net/http包来实现RESTful API。 下面…