React 组件传 children 的各种方案

news/2025/3/16 8:58:52/

自定义组件的时候往往需要传 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.ppmy.cn/news/1147527.html

相关文章

前端预览、下载二进制文件流(png、pdf)

前端请求设置 responseType: “blob” 后台接口返回的文件流如下&#xff1a; 拿到后端返回的文件流后&#xff1a; 预览 <iframe :src"previewUrl" frameborder"0" style"width: 500px; height: 500px;"></iframe>1、预览 v…

vue项目的学习周报03

学习周报 日期范围&#xff1a;2023年9月25日~2023年10月1日 学习目标&#xff1a;本周的学习目标是学习vue的基础知识 学习成果&#xff1a;在本周我完成以下任务和学习活动&#xff1a; 1.我完成了对vue.js的基础认识&#xff1b; 2.学习了通过index.js导入新的组件&#…

api接口为什么需要加密,PHP接口加密的方法有哪些

为什么需要进行加密: 保护敏感数据&#xff1a;许多应用程序需要在不同系统之间传输敏感数据&#xff0c;例如用户凭据、个人信息、金融信息等。接口加密可以确保这些敏感数据在传输过程中不会被未经授权的访问者窃取。 防止中间人攻击&#xff1a;在数据通过互联网传输的过程…

ubuntu安装Miniconda并举例使用

更新系统包 sudo apt update sudo apt upgrade官网下载Miniconda&#xff0c;最好是实体机下载后放进虚拟机&#xff0c;方法可以参考Xftp 7连接服务器或者本地虚拟机文章 https://docs.conda.io/en/latest/miniconda.html#linux-installers 进入安装目录执行&#xff0c;右键…

Python 集合(Sets)1

集合 集合用于在单个变量中存储多个项。集合是 Python 中的 4 种内置数据类型之一&#xff0c;用于存储数据集合&#xff0c;其他 3 种是列表&#xff08;List&#xff09;、元组&#xff08;Tuple&#xff09;和字典&#xff08;Dictionary&#xff09;&#xff0c;它们都具有…

ubuntu2204配置仓库为阿里源

官网上支持到2004&#xff0c;2204需要手动更改一下 deb https://mirrors.aliyun.com/ubuntu/ jammy main restricted universe multiverse deb-src https://mirrors.aliyun.com/ubuntu/ jammy main restricted universe multiversedeb https://mirrors.aliyun.com/ubuntu/ jam…

C# Onnx GFPGAN GPEN-BFR 人像修复

效果 项目 代码 using Microsoft.ML.OnnxRuntime; using Microsoft.ML.OnnxRuntime.Tensors; using OpenCvSharp; using System; using System.Collections.Generic; using System.Drawing; using System.Windows.Forms;namespace 图像修复 {public partial class Form1 : For…

LuatOS-SOC接口文档(air780E)-- httpsrv - http服务端

httpsrv.start(port, func)# 启动并监听一个http端口 参数 传入值类型 解释 int 端口号 function 回调函数 返回值 返回值类型 解释 bool 成功返回true, 否则返回false 例子 -- 监听80端口 httpsrv.start(80, function(client, method, uri, headers, body)-- m…