React?組件傳?children?的各種案例方案詳解
更新時間：2023年10月12日 09:40:32 作者：祖安狂人學編程
自定義組件的時候往往需要傳?children,由于寫法比較多樣,我就總結(jié)了一下,要自定義的組件其中包含一個?title?和一個?children,本文通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧
自定義組件的時候往往需要傳 children，由于寫法比較多樣，我就總結(jié)了一下。
要自定義的組件是這樣的：
其中包含一個 title 和一個 children。
定義一個后面要用到的 Props:
/** 定義屬性對象
* - title: 標題
* - 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>
);
}
}
到此這篇關(guān)于React 組件傳 children 的各種方案的文章就介紹到這了,更多相關(guān)React 組件傳 children內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Redux是JavaScript狀態(tài)容器，提供可預測化的狀態(tài)管理，今天通過本文給大家分享redux在react中使用及配置redux到react項目中的方法，感興趣的朋友跟隨小編一起看看吧2021-06-06
這篇文章主要介紹了React中的Hooks路由跳轉(zhuǎn)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
D3.js(v3)+react 實現(xiàn)帶坐標與比例尺的散點圖 (V3版本)
散點圖(Scatter Chart),通常是一橫一豎兩個坐標軸，數(shù)據(jù)是一組二維坐標，分別對應(yīng)兩個坐標軸，與坐標軸對應(yīng)的地方打上點。由此可以猜到，需要的元素包括circle(圓)和axis(坐標軸),接下來通過本文大家分享D3.js(v3)+react 實現(xiàn)帶坐標與比例尺的散點圖 (V3版本) ，一起看看2019-05-05
本篇文章主要介紹了手動用webpack搭第一個 ReactApp的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
react?card?slider實現(xiàn)滑動卡片教程示例
這篇文章主要為大家介紹了react?card?slider實現(xiàn)滑動卡片教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
本文主要介紹了react組件傳值的四種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
React項目開發(fā)中函數(shù)組件與函數(shù)式編程關(guān)系
函數(shù)組件和函數(shù)式編程究竟是什么關(guān)系呢？本文會圍繞這個話題展開講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了React?Context用法小結(jié)(附完整代碼),Context提供了一種新的組件之間共享數(shù)據(jù)的方式，允許數(shù)據(jù)隔代傳遞，而不必顯式的通過組件樹逐層傳遞props，本文通過示例代碼介紹的非常詳細，需要的朋友可以參考下2023-04-04
這篇文章主要給大家介紹了react聲明組件有哪幾種方法,各有什么不同,文章通過代碼示例介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2023-11-11
React-Native中禁用Navigator手勢返回的示例代碼
本篇文章主要介紹了React-Native中禁用Navigator手勢返回的示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-09-09