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

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

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

原生組件是對公共場景的抽象,若要契合實際業(yè)務(wù)往往需要對其進行二次包裝。
對組件進行二次包裝一般需要進行包括不限于以下的步驟:

  • 組件類型類型聲明
  • 自定義組件渲染邏輯
  • 向原生組件透傳屬性

1. 類型聲明

類型聲明是組件二次包裝過程中的第一步,項目中常見的方案是直接進行類型聲明,例如通過Button組件包裝個自定義的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;

直接類型聲明簡單粗暴,用到什么屬性就添加什么,但存在一個致命的,其限定了原生組件提供的能力,降低了二次包裝的自定義組件的可用性。
因此更為好的方案是類型繼承,不僅繼承類型,也繼承屬性:

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. 默認屬性

開源組件庫提供的組件滿足了日常項目的開發(fā)需求,但開源項目畢竟是面對公共場景,其組件默認值并不能匹配實際的業(yè)務(wù)場景,因此我們通常需要在二次包裝自定義組件的時候重置默認值。
常見的重置方案也是直接重置:

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;

這種方式很直觀,也沒有任何問題。但追求極致的各位大佬們,肯定在重置多個自定義組件的過程中厭煩了這種重復(fù)的寫法。
因此更好的方式是使用高階組件,首先先定義一個通用的Hoc:

import React from "react";

/**
?* 組件默認屬性Hoc
?* @param defaultProps 默認屬性
?* @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;
? };
}

這時候?qū)傩灾刂镁蜁兊糜袃|點點優(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);

通過組件默認屬性Hoc可以有效抽離包裝業(yè)務(wù)組件,優(yōu)化代碼結(jié)構(gòu)。

3. 自定義屬性與屬性透傳

二次包裝組件的當然不僅僅只包含原生組件的屬性,還有新增的自定義屬性,例如下面定義的組件:

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);

上述代碼中未過濾自定義屬性,可能會導(dǎo)致原生組件接收非聲明的屬性導(dǎo)致渲染異常(例如Antd組件會將未聲明屬性渲染為文檔標簽屬性,輸出控制臺錯誤)。
因此往往需要做自定義屬性過濾后再進行透傳,過濾方式包括不限于以下這些:

  • 通過拓展運算符
  • 通過omit函數(shù)

改造后代碼如下:

import React, { useEffect } from "react";
import { Button, ButtonProps } from "@arco-design/web-react";

type IProps = ButtonProps & {
? hello?: string;
};

/// 這里通過拓展運算符過濾原生組件未聲明屬性
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組件二次包裝的具體實現(xiàn)的文章就介紹到這了,更多相關(guān)React組件二次包裝裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

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

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

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

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

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

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

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

    React利用插件和不用插件實現(xiàn)雙向綁定的方法詳解

    我們知道在 angular 中數(shù)據(jù)時雙向綁定的;而在 react 中,數(shù)據(jù)是向一個方向傳遞:從擁有者到子節(jié)點。也就是我們說的單向數(shù)據(jù)綁定。那如何實現(xiàn)雙向綁定呢?下面這篇文章主要給大家介紹了關(guān)于React利用插件和不用插件實現(xiàn)雙向綁定的方法,需要的朋友可以參考下。
    2017-07-07
  • Reactjs實現(xiàn)通用分頁組件的實例代碼

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

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

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

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

    React Native中Navigator的使用方法示例

    導(dǎo)航組件Navigator可以讓我們客戶端在不同的頁面見進行切換,下面這篇文章主要給大家介紹了關(guān)于React Native中Navigator的使用方法,文中通過圖文介紹的非常詳細,需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-10-10
  • React項目中動態(tài)插入HTML內(nèi)容的實現(xiàn)

    React項目中動態(tài)插入HTML內(nèi)容的實現(xiàn)

    本文主要介紹了React項目中動態(tài)插入HTML內(nèi)容的實現(xiàn),通過使用React的dangerouslySetInnerHTML屬性,我們可以將HTML內(nèi)容插入到組件中,具有一定的參考價值,感興趣的可以了解一下
    2023-10-10
  • 快速搭建React的環(huán)境步驟詳解

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

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

    React+Typescript項目環(huán)境搭建并使用redux環(huán)境的詳細過程

    這篇文章主要介紹了React+Typescript項目環(huán)境搭建并使用redux環(huán)境的詳細過程,本文通過圖文實例相結(jié)合給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-09-09

最新評論