詳解react如何實(shí)現(xiàn)復(fù)合組件
需求點(diǎn)
在一些react項(xiàng)目開發(fā)中，常常會出現(xiàn)一些組合的情況出現(xiàn)，比如一個card組件中，可能有以下幾個組合功能
- Haeder組件
- Content組件
- Footer組件
用戶需要在不同的環(huán)境下去使用card組件，可能不需要Header或者footer, 這種情況下，常見的條件渲染會使組件的邏輯變得復(fù)雜與難于組合，因此，復(fù)合組件的方式就是為了解決以上需求
具體實(shí)現(xiàn)
1.使用vite創(chuàng)建工程
npm init vite@latest
2.創(chuàng)建components文件夾，創(chuàng)建Card.tsx組件
import { PropsWithChildren } from "react";
import { CardProps } from "./type";
import "./card.css";
const Card = ({ children }: CardProps) => {
return <div className="card">{children}</div>;
};
// card header
Card.Haeder = ({ children }: PropsWithChildren) => {
return (
<div className="header">
<span>{children}</span>
</div>
);
};
// card content
Card.Content = ({ children }: PropsWithChildren) => {
return <div className="content">{children}</div>;
};
// card footer
Card.Footer = ({ children }: PropsWithChildren) => {
return <div className="footer">{children}</div>;
};
export default Card;
實(shí)現(xiàn)效果
1.在App組件中組合使用
import Card from "./components/Card";
function App() {
return (
<div className="app">
<Card>
<Card.Haeder>card標(biāo)題</Card.Haeder>
<Card.Content>neirong</Card.Content>
<Card.Footer>
<div className="footer-btn">
<button>取消</button>
<button>確認(rèn)</button>
</div>
</Card.Footer>
</Card>
</div>
);
}
export default App;
2.組件效果
總結(jié)
利用了js函數(shù)是一個對象的特性，為主函數(shù)增加組合的屬性，在組件使用的時候，可以方便的組合使用
使用了children props，可以方便使用者將任意的結(jié)構(gòu)傳入組件內(nèi)部
可以繼續(xù)擴(kuò)展在復(fù)合組件內(nèi)部使用context, 全局管理組件，可以管理組件內(nèi)部的狀態(tài)
到此這篇關(guān)于詳解react如何實(shí)現(xiàn)復(fù)合組件的文章就介紹到這了,更多相關(guān)react實(shí)現(xiàn)復(fù)合組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React實(shí)現(xiàn)類似淘寶tab居中切換效果的示例代碼
這篇文章主要介紹了React實(shí)現(xiàn)類似淘寶tab居中切換效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細(xì)介紹了如何使用React實(shí)現(xiàn)圖片縮放的功能,文中的示例代碼講解詳細(xì),具有一定的參考價值,感興趣的小伙伴可以了解下2023-10-10
React實(shí)現(xiàn)下拉框的key,value的值同時傳送
這篇文章主要介紹了React實(shí)現(xiàn)下拉框的key,value的值同時傳送方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要給大家介紹了關(guān)于React組件重構(gòu)之嵌套+繼承及高階組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
react結(jié)合bootstrap實(shí)現(xiàn)評論功能
這篇文章主要為大家詳細(xì)介紹了react結(jié)合bootstrap實(shí)現(xiàn)評論功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
react+typescript中使用echarts的實(shí)現(xiàn)步驟
本文主要介紹了react+typescript中使用echarts的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
ReactHook使用useState更新變量后,如何拿到變量更新后的值
這篇文章主要介紹了ReactHook使用useState更新變量后,如何拿到變量更新后的值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
React?中如何將CSS?visibility?屬性設(shè)置為?hidden
這篇文章主要介紹了React中如何將CSS?visibility屬性設(shè)置為?hidden,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
一文搞懂?React?18?中的?useTransition()?與?useDeferredValue()
這篇文章主要介紹了一文搞懂?React?18?中的?useTransition()與useDeferredValue()，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
本文我們將介紹 React中組件的類別，以及如何創(chuàng)建和使用組件。具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06