亲宝软件园·资讯

展开

React组件二次包装

Pwcong 人气:0

原生组件是对公共场景的抽象,若要契合实际业务往往需要对其进行二次包装。
对组件进行二次包装一般需要进行包括不限于以下的步骤:

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. 默认属性

开源组件库提供的组件满足了日常项目的开发需求,但开源项目毕竟是面对公共场景,其组件默认值并不能匹配实际的业务场景,因此我们通常需要在二次包装自定义组件的时候重置默认值。
常见的重置方案也是直接重置:

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;

这种方式很直观,也没有任何问题。但追求极致的各位大佬们,肯定在重置多个自定义组件的过程中厌烦了这种重复的写法。
因此更好的方式是使用高阶组件,首先先定义一个通用的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;
  };
}

这时候属性重置就会变得有亿点点优雅了:

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可以有效抽离包装业务组件,优化代码结构。

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

上述代码中未过滤自定义属性,可能会导致原生组件接收非声明的属性导致渲染异常(例如Antd组件会将未声明属性渲染为文档标签属性,输出控制台错误)。
因此往往需要做自定义属性过滤后再进行透传,过滤方式包括不限于以下这些:

改造后代码如下:

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

加载全部内容

相关教程
猜你喜欢
用户评论