React組件二次包裝的具體實(shí)現(xiàn)
原生組件是對(duì)公共場(chǎng)景的抽象,若要契合實(shí)際業(yè)務(wù)往往需要對(duì)其進(jìn)行二次包裝。
對(duì)組件進(jìn)行二次包裝一般需要進(jìn)行包括不限于以下的步驟:
- 組件類型類型聲明
- 自定義組件渲染邏輯
- 向原生組件透?jìng)鲗傩?/li>
1. 類型聲明
類型聲明是組件二次包裝過程中的第一步,項(xiàng)目中常見的方案是直接進(jìn)行類型聲明,例如通過Button組件包裝個(gè)自定義的Button:
import React, { CSSProperties } from "react"; import { Button } from "@arco-design/web-react"; type IProps = { ? style?: CSSProperties; ? className?: string | string[]; ? type?: "default" | "primary" | "secondary" | "dashed" | "text" | "outline"; ? // ...其他Button屬性 }; const MyButton: React.FC<IProps> = ({ style, className, type, children }) => { ? // 此處為自定義邏輯 ? return ( ? ? <Button style={style} className={className} type={type}> ? ? ? {children} ? ? </Button> ? ); }; export default MyButton;
直接類型聲明簡單粗暴,用到什么屬性就添加什么,但存在一個(gè)致命的,其限定了原生組件提供的能力,降低了二次包裝的自定義組件的可用性。
因此更為好的方案是類型繼承,不僅繼承類型,也繼承屬性:
import React from "react"; import { Button, ButtonProps } from "@arco-design/web-react"; // 繼承類型 type IProps = ButtonProps & {}; const MyButton: React.FC<IProps> = (props) => { ? // 此處為自定義邏輯 ? // 繼承屬性 ? return <Button {...props} />; }; export default MyButton;
2. 默認(rèn)屬性
開源組件庫提供的組件滿足了日常項(xiàng)目的開發(fā)需求,但開源項(xiàng)目畢竟是面對(duì)公共場(chǎng)景,其組件默認(rèn)值并不能匹配實(shí)際的業(yè)務(wù)場(chǎng)景,因此我們通常需要在二次包裝自定義組件的時(shí)候重置默認(rèn)值。
常見的重置方案也是直接重置:
import React from "react"; import { Button, ButtonProps } from "@arco-design/web-react"; type IProps = ButtonProps & {}; const MyButton: React.FC<IProps> = (props) => { ? const { size = "large", type = "primary" } = props; ? return <Button size={size} type={type} {...props} />; }; export default MyButton;
這種方式很直觀,也沒有任何問題。但追求極致的各位大佬們,肯定在重置多個(gè)自定義組件的過程中厭煩了這種重復(fù)的寫法。
因此更好的方式是使用高階組件,首先先定義一個(gè)通用的Hoc:
import React from "react"; /** ?* 組件默認(rèn)屬性Hoc ?* @param defaultProps 默認(rèn)屬性 ?* @returns ?*/ export function withDefaultProps<P = {}>(defaultProps?: Partial<P>) { ? return function (Component: any) { ? ? const WrappedComponent: React.FC<P> = (props) => { ? ? ? return React.createElement(Component, { ? ? ? ? ...defaultProps, ? ? ? ? ...props, ? ? ? }); ? ? }; ? ? WrappedComponent.displayName = `withDefaultProps(${getDisplayName( ? ? ? Component ? ? )})`; ? ? return WrappedComponent; ? }; }
這時(shí)候?qū)傩灾刂镁蜁?huì)變得有億點(diǎn)點(diǎn)優(yōu)雅了:
import React from "react"; import { Button, ButtonProps } from "@arco-design/web-react"; type IProps = ButtonProps & {}; export default withDefaultProps<IProps>({ ? size: "large", ? type: "primary", })(Button);
通過組件默認(rèn)屬性Hoc可以有效抽離包裝業(yè)務(wù)組件,優(yōu)化代碼結(jié)構(gòu)。
3. 自定義屬性與屬性透?jìng)?/h2>
二次包裝組件的當(dāng)然不僅僅只包含原生組件的屬性,還有新增的自定義屬性,例如下面定義的組件:
import React, { useEffect } from "react"; import { Button, ButtonProps } from "@arco-design/web-react"; type IProps = ButtonProps & { ? hello?: string; }; const MyButton: React.FC<IProps> = (props) => { ? useEffect(() => console.log(props.hello), [props.hello]); ? return <Button {...props} />; }; export default withDefaultProps<IProps>({ ? hello: "world", })(MyButton);
上述代碼中未過濾自定義屬性,可能會(huì)導(dǎo)致原生組件接收非聲明的屬性導(dǎo)致渲染異常(例如Antd組件會(huì)將未聲明屬性渲染為文檔標(biāo)簽屬性,輸出控制臺(tái)錯(cuò)誤)。
因此往往需要做自定義屬性過濾后再進(jìn)行透?jìng)?,過濾方式包括不限于以下這些:
- 通過拓展運(yùn)算符
- 通過omit函數(shù)
改造后代碼如下:
import React, { useEffect } from "react"; import { Button, ButtonProps } from "@arco-design/web-react"; type IProps = ButtonProps & { ? hello?: string; }; /// 這里通過拓展運(yùn)算符過濾原生組件未聲明屬性 const MyButton: React.FC<IProps> = ({ hello, ...restProps }) => { ? useEffect(() => console.log(hello), [hello]); ? return <Button {...restProps} />; }; export default withDefaultProps<IProps>({ ? hello: "world", })(MyButton);
到此這篇關(guān)于React組件二次包裝的具體實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)React組件二次包裝裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
react 兄弟組件如何調(diào)用對(duì)方的方法示例
這篇文章主要介紹了react 兄弟組件如何調(diào)用對(duì)方的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10React利用插件和不用插件實(shí)現(xiàn)雙向綁定的方法詳解
我們知道在 angular 中數(shù)據(jù)時(shí)雙向綁定的;而在 react 中,數(shù)據(jù)是向一個(gè)方向傳遞:從擁有者到子節(jié)點(diǎn)。也就是我們說的單向數(shù)據(jù)綁定。那如何實(shí)現(xiàn)雙向綁定呢?下面這篇文章主要給大家介紹了關(guān)于React利用插件和不用插件實(shí)現(xiàn)雙向綁定的方法,需要的朋友可以參考下。2017-07-07Reactjs實(shí)現(xiàn)通用分頁組件的實(shí)例代碼
這篇文章主要介紹了Reactjs實(shí)現(xiàn)通用分頁組件的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-01-01React項(xiàng)目中動(dòng)態(tài)插入HTML內(nèi)容的實(shí)現(xiàn)
本文主要介紹了React項(xiàng)目中動(dòng)態(tài)插入HTML內(nèi)容的實(shí)現(xiàn),通過使用React的dangerouslySetInnerHTML屬性,我們可以將HTML內(nèi)容插入到組件中,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10React+Typescript項(xiàng)目環(huán)境搭建并使用redux環(huán)境的詳細(xì)過程
這篇文章主要介紹了React+Typescript項(xiàng)目環(huán)境搭建并使用redux環(huán)境的詳細(xì)過程,本文通過圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09