詳解react如何實現(xiàn)復合組件
更新時間：2024年10月30日 08:49:45 作者：omijer
在一些react項目開發(fā)中,常常會出現(xiàn)一些組合的情況出現(xiàn),這篇文章主要為大家介紹了復合組件的具體實現(xiàn),感興趣的小伙伴可以跟隨小編一起學習一下
需求點
在一些react項目開發(fā)中，常常會出現(xiàn)一些組合的情況出現(xiàn)，比如一個card組件中，可能有以下幾個組合功能
- Haeder組件
- Content組件
- Footer組件
用戶需要在不同的環(huán)境下去使用card組件，可能不需要Header或者footer, 這種情況下，常見的條件渲染會使組件的邏輯變得復雜與難于組合，因此，復合組件的方式就是為了解決以上需求
具體實現(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;
實現(xiàn)效果
1.在App組件中組合使用
import Card from "./components/Card";
function App() {
return (
<div className="app">
<Card>
<Card.Haeder>card標題</Card.Haeder>
<Card.Content>neirong</Card.Content>
<Card.Footer>
<div className="footer-btn">
<button>取消</button>
<button>確認</button>
</div>
</Card.Footer>
</Card>
</div>
);
}
export default App;
2.組件效果
總結
利用了js函數(shù)是一個對象的特性，為主函數(shù)增加組合的屬性，在組件使用的時候，可以方便的組合使用
使用了children props，可以方便使用者將任意的結構傳入組件內部
可以繼續(xù)擴展在復合組件內部使用context, 全局管理組件，可以管理組件內部的狀態(tài)
到此這篇關于詳解react如何實現(xiàn)復合組件的文章就介紹到這了,更多相關react實現(xiàn)復合組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
antd是react流行的ui框架庫，本文主要介紹了react antd實現(xiàn)動態(tài)增減表單，分享給大家，感興趣的小伙伴們可以參考一下2021-06-06
本文主要介紹了React 中合成事件的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-02-02
這篇文章主要為大家詳細介紹了react四大核心內容架構，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據，即可實現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2023-03-03
這篇文章主要介紹了React倒計時功能實現(xiàn)——解耦通用,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
這篇文章主要為大家介紹了React的生命周期函數(shù)初始掛載更新移除詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
作為一個前端開發(fā)時刻想著，怎么把自己寫的東西，丟到自己的服務器上面，然后展示給別人看。下面我就簡單直白的寫下，這篇文章主要給大家介紹了關于nginx配置React靜態(tài)頁面的方法教程,需要的朋友可以參考下。2017-11-11
useEffect是React中的一個鉤子函數(shù),用于處理副作用操作,這篇文章主要為大家介紹了React中useEffect函數(shù)的具體用法,希望對大家有所幫助2023-08-08
TypeScript 實際上就是具有強類型的 JavaScript,可以對類型進行強校驗,好處是代碼閱讀起來比較清晰,代碼類型出現(xiàn)問題時,在編譯時就可以發(fā)現(xiàn),而不會在運行時由于類型的錯誤而導致報錯,這篇文章主要介紹了ReactJS中使用TypeScript的方法,需要的朋友可以參考下2024-04-04
本文介紹了如何在React中處理表單數(shù)據,包括控制組件和非控制組件的使用,通過控制組件,表單的輸入值由React組件的狀態(tài)控制；非控制組件通過ref來訪問表單輸入的當前值,文章還展示了如何處理多個輸入和添加驗證和樣式,以提供更好的用戶體驗2025-02-02