欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React組件二次包裝的具體實(shí)現(xiàn)

 更新時(shí)間:2022年02月16日 14:58:03   作者:Pwcong  
本文主要介紹了React組件二次包裝的具體實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

原生組件是對(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狀態(tài)管理的簡明指南

    React狀態(tài)管理的簡明指南

    Redux 是React最常用的集中狀態(tài)管理工具,本文主要介紹了React狀態(tài)管理的簡明指南,具有一定的參考價(jià)值,感興趣的可以了解一下
    2024-01-01
  • ReactJs快速入門教程(精華版)

    ReactJs快速入門教程(精華版)

    React 起源于 Facebook 的內(nèi)部項(xiàng)目,因?yàn)樵摴緦?duì)市場(chǎng)上所有 JavaScript MVC 框架,都不滿意,就決定自己寫一套,用來架設(shè) Instagram 的網(wǎng)站.這篇文章主要介紹了ReactJs快速入門教程(精華版)的相關(guān)資料,需要的朋友可以參考下
    2016-11-11
  • react 兄弟組件如何調(diào)用對(duì)方的方法示例

    react 兄弟組件如何調(diào)用對(duì)方的方法示例

    這篇文章主要介紹了react 兄弟組件如何調(diào)用對(duì)方的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-10-10
  • React利用插件和不用插件實(shí)現(xiàn)雙向綁定的方法詳解

    React利用插件和不用插件實(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-07
  • Reactjs實(shí)現(xiàn)通用分頁組件的實(shí)例代碼

    Reactjs實(shí)現(xiàn)通用分頁組件的實(shí)例代碼

    這篇文章主要介紹了Reactjs實(shí)現(xiàn)通用分頁組件的實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧
    2017-01-01
  • react解析html字符串方法實(shí)現(xiàn)

    react解析html字符串方法實(shí)現(xiàn)

    在使用reactjs庫的時(shí)候,會(huì)遇到將一段html的字符串,然后要將它插入頁面中以html的形式展現(xiàn),本文主要介紹了react解析html字符串方法實(shí)現(xiàn),感興趣的可以了解一下
    2023-12-12
  • React Native中Navigator的使用方法示例

    React Native中Navigator的使用方法示例

    導(dǎo)航組件Navigator可以讓我們客戶端在不同的頁面見進(jìn)行切換,下面這篇文章主要給大家介紹了關(guān)于React Native中Navigator的使用方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-10-10
  • React項(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項(xiàng)目中動(dòng)態(tài)插入HTML內(nèi)容的實(shí)現(xiàn),通過使用React的dangerouslySetInnerHTML屬性,我們可以將HTML內(nèi)容插入到組件中,具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-10-10
  • 快速搭建React的環(huán)境步驟詳解

    快速搭建React的環(huán)境步驟詳解

    本篇文章主要介紹了快速搭建React的步驟詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-11-11
  • React+Typescript項(xiàng)目環(huán)境搭建并使用redux環(huán)境的詳細(xì)過程

    React+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

最新評(píng)論