React組件傳children的方案總結(jié)
更新時(shí)間：2023年10月12日 09:35:02 作者：祖安狂人學(xué)編程
自定義組件的時(shí)候往往需要傳 children,由于寫法比較多樣,我就總結(jié)了一下,文中有詳細(xì)的總結(jié)內(nèi)容和代碼示例,具有一定的參考價(jià)值,需要的朋友可以參考下
要自定義的組件是這樣的：
其中包含一個(gè) title 和一個(gè) children。
定義一個(gè)后面要用到的 Props:
/** 定義屬性對(duì)象
* - title: 標(biāo)題
* - children: 子組件
*/
type Props = {
title: string;
children?: React.ReactNode;
};1. 類組件
1.1 類組件，不使用解構(gòu)
class ClassComponent1 extends Component<Props> {
render(): ReactNode {
return (
<div style={{ backgroundColor: 'red' }}>
<h2>{this.props.title}</h2>
{this.props.children}
</div>
);
}
}1.2 類組件，使用解構(gòu)
class ClassComponent2 extends Component<Props> {
render(): ReactNode {
// 解構(gòu)賦值
const { title, children } = this.props;
return (
<div style={{ backgroundColor: 'red' }}>
<h2>{title}</h2>
{children}
</div>
);
}
}2. 函數(shù)組件
2.1 函數(shù)組件，不使用解構(gòu)
const FunctionComponent1: React.FC<Props> = (props) => {
return (
<div style={{ backgroundColor: 'orange' }}>
<h2>{props.title}</h2>
{props.children}
</div>
);
};2.2 函數(shù)組件，外部解構(gòu)
const FunctionComponent2: React.FC<Props> = ({ title, children }) => {
return (
<div style={{ backgroundColor: 'orange' }}>
<h2>{title}</h2>
{children}
</div>
);
};2.3 函數(shù)組件，內(nèi)部解構(gòu)
const FunctionComponent3: React.FC<Props> = (props) => {
// 解構(gòu)賦值
const { title, children } = props;
return (
<div style={{ backgroundColor: 'orange' }}>
<h2>{title}</h2>
{children}
</div>
);
};3. 普通函數(shù)
3.1 普通函數(shù)，內(nèi)部解構(gòu)
function NormalFunction1(props: Props) {
// 解構(gòu)賦值
const { title, children } = props;
return (
<div style={{ backgroundColor: 'yellow' }}>
<h2>{title}</h2>
{children}
</div>
);
}3.2 普通函數(shù)，外部解構(gòu)
function NormalFunction2({ title, children }: Props) {
return (
<div style={{ backgroundColor: 'yellow' }}>
<h2>{title}</h2>
{children}
</div>
);
}3.3 普通函數(shù)，外部解構(gòu)，不使用自定義Type
function NormalFunction3({
title,
children,
}: {
title: string;
children?: React.ReactNode;
}) {
return (
<div style={{ backgroundColor: 'yellow' }}>
<h2>{title}</h2>
{children}
</div>
);
}3.4 普通函數(shù)，不使用解構(gòu)，不使用自定義Type
function NormalFunction4(props: { title: string; children?: React.ReactNode }) {
return (
<div style={{ backgroundColor: 'yellow' }}>
<h2>{props.title}</h2>
{props.children}
</div>
);
}調(diào)用及展示
export default class ChildrenPage extends Component {
render() {
return (
<div style={{ padding: '20px' }}>
<h1>組件傳children</h1>
<ClassComponent1 title="類組件，不使用解構(gòu)">
<p>這里是children</p>
</ClassComponent1>
<ClassComponent2 title="類組件，使用解構(gòu)">
<p>這里是children</p>
</ClassComponent2>
<FunctionComponent1 title="函數(shù)組件，不使用解構(gòu)">
<p>這是里children</p>
</FunctionComponent1>
<FunctionComponent2 title="函數(shù)組件，外部解構(gòu)">
<p>這是里children</p>
</FunctionComponent2>
<FunctionComponent3 title="函數(shù)組件，內(nèi)部解構(gòu)">
<p>這是里children</p>
</FunctionComponent3>
<NormalFunction1 title="普通函數(shù)，內(nèi)部解構(gòu)">
<p>這里是children</p>
</NormalFunction1>
<NormalFunction2 title="普通函數(shù)，外部解構(gòu)">
<p>這里是children</p>
</NormalFunction2>
<NormalFunction3 title="普通函數(shù)，外部解構(gòu)，不使用自定義Type">
<p>這里是children</p>
</NormalFunction3>
<NormalFunction4 title="普通函數(shù)，不使用解構(gòu)，不使用自定義Type">
<p>這里是children</p>
</NormalFunction4>
</div>
);
}
}
以上就是React組件傳children的方案總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于React組件傳children的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
React中實(shí)現(xiàn)組件通信的幾種方式小結(jié)
在構(gòu)建復(fù)雜的React應(yīng)用時(shí),組件之間的通信是至關(guān)重要的,從簡(jiǎn)單的父子組件通信到跨組件狀態(tài)同步,不同組件之間的通信方式多種多樣,下面我們認(rèn)識(shí)react組件通信的幾種方式,需要的朋友可以參考下2024-04-04
React+TypeScript+webpack4多入口配置詳解
這篇文章主要介紹了React+TypeScript+webpack4多入口配置詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
詳解如何在項(xiàng)目中使用jest測(cè)試react native組件
本篇文章主要介紹了詳解如何在項(xiàng)目中使用jest測(cè)試react native組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了react-native封裝插件swiper的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
雖然一直有做react相關(guān)的優(yōu)化,按需加載、dll 分離、服務(wù)端渲染,但是從來(lái)沒(méi)有從路由代碼分割這一塊入手過(guò),所以下面這篇文章主要給大家介紹了關(guān)于React中代碼分割的方式,需要的朋友可以參考下2022-12-12
使用React路由實(shí)現(xiàn)頁(yè)面導(dǎo)航的示例代碼
在構(gòu)建現(xiàn)代Web應(yīng)用程序時(shí),前端路由是一個(gè)不可或缺的部分,今天,我們將討論如何在React中使用React Router來(lái)實(shí)現(xiàn)頁(yè)面導(dǎo)航,在這篇博客中,我們將會(huì)探索路由的基本概念,設(shè)置React Router,并通過(guò)示例代碼來(lái)展示如何實(shí)現(xiàn)復(fù)雜的頁(yè)面導(dǎo)航,需要的朋友可以參考下2025-02-02
React-Native中禁用Navigator手勢(shì)返回的示例代碼
本篇文章主要介紹了React-Native中禁用Navigator手勢(shì)返回的示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-09-09
React-Router如何進(jìn)行頁(yè)面權(quán)限管理的方法
本篇文章主要介紹了React-Router如何進(jìn)行頁(yè)面權(quán)限管理的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
windows下create-react-app 升級(jí)至3.3.1版本踩坑記
這篇文章主要介紹了windows下create-react-app 升級(jí)至3.3.1版本踩坑記，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
React Hooks中模擬Vue生命周期函數(shù)的指南
React Hooks 提供了一種在函數(shù)組件中使用狀態(tài)和其他 React 特性的方式,而不需要編寫類組件,Vue 的生命周期函數(shù)和 React Hooks 之間有一定的對(duì)應(yīng)關(guān)系,本文給大家介紹了React Hooks中模擬Vue生命周期函數(shù)的指南,需要的朋友可以參考下2024-10-10