0

我正在尝试构建一个我想要执行以下操作的 React HOC：

  • 获取传入的组件，添加（或覆盖）hidden属性，并返回修改后的组件
  • 渲染组件，以便当“隐藏”为真时，不渲染任何内容

我在 Typescript 中为特定组件工作，如下所示

import React from 'react';
import { FabProps, Fab } from '@material-ui/core';
import ButtonWithText, { ButtonWithTextProps } from '../UserInterface/ButtonWithText';

interface IFabWithHiddenProps {
    hidden?: boolean;
}

export class ButtonWithTextWithHidden extends React.Component<ButtonWithTextProps & IFabWithHiddenProps> {
    render(){
        const {
            hidden,
            ...buttonProps
        } = this.props;

        if (hidden === undefined || hidden) {
            return <></>;
        }
        else {
            return <ButtonWithText {...buttonProps} />;
        }
    }
}

export class FabWithHidden extends React.Component<FabProps & IFabWithHiddenProps> {
    render(){
        const {
            hidden,
            ...buttonProps
        } = this.props;

        if (hidden === undefined || hidden) {
            return <></>;
        }
        else {
            return <Fab {...buttonProps} />;
        }
    }
}

但是，我想将这两个类变成一个 HOC。有什么建议么？

编辑：我想要足够通用的东西来处理所有组件类型，而不仅仅是这两种情况，所以我可以轻松地将 HOC 用于 和 以外的Fab组件ButtonWithText。

4

1 回答 1

1

我认为你需要合并你的两个接口并像这样处理你的问题：

interface IFabWithHiddenProps extends ButtonWithTextProps , FabProps  {
  hidden?:boolean;
  type : string; // this can be fab | button
}

并像这样使用它：

export default class FabOrButtonWithHidden extends React.Component<IFabWithHiddenProps> {
    render(){
        const {
            hidden,
            type
            ...rest
        } = this.props;

        if (hidden === undefined || hidden) {
            return <></>;
        } else if(type === "button") {
           return (
            <ButtonWithText {...rest} />
           )

        }
        else {
            return <Fab {...rest} />;
        }
    }
}
于 2020-02-15T05:39:24.700 回答