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)文章
高階組件（Higher-Order?Component,HOC）是一種用于在?React?中復(fù)用組件邏輯的技術(shù),這篇文章主要介紹了React常見的?HOC?使用案例示例代碼,需要的朋友可以參考下2024-08-08
詳解如何使用React Hooks請(qǐng)求數(shù)據(jù)并渲染
這篇文章主要介紹了如何使用React Hooks請(qǐng)求數(shù)據(jù)并渲染，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
react實(shí)現(xiàn)路由動(dòng)畫跳轉(zhuǎn)功能
這篇文章主要介紹了react路由動(dòng)畫跳轉(zhuǎn)功能,大概思路是下載第三方庫?引用,創(chuàng)建css文件引用,想要實(shí)現(xiàn)跳轉(zhuǎn)動(dòng)畫功能,就在那個(gè)組件的根節(jié)點(diǎn)綁定classname屬性即可,在跳轉(zhuǎn)的時(shí)候即可實(shí)現(xiàn),需要的朋友可以參考下2023-10-10
React中使用TS完成父組件調(diào)用子組件的操作方法
由于在項(xiàng)目開發(fā)過程中，我們往往時(shí)需要調(diào)用子組件中的方法，這篇文章主要介紹了React中使用TS完成父組件調(diào)用子組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
react.js組件實(shí)現(xiàn)拖拽復(fù)制和可排序的示例代碼
這篇文章主要介紹了react.js組件實(shí)現(xiàn)拖拽復(fù)制和可排序的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
淺談React Router關(guān)于history的那些事
這篇文章主要介紹了淺談React Router關(guān)于history的那些事，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
React Antd中如何設(shè)置表單只輸入數(shù)字
這篇文章主要介紹了React Antd中如何設(shè)置表單只輸入數(shù)字問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
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
react-native 封裝選擇彈出框示例(試用ios&android)
本篇文章主要介紹了react-native 封裝選擇彈出框示例(試用ios&android)，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了淺談React Event實(shí)現(xiàn)原理,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09