Добавление свойства в компонент высокого порядка React Typescript, включая реализацию

Question

Я пытаюсь построить React HO C, для которого я хочу сделать следующее:

• Взять переданный компонент, добавить (или переопределить) свойство hidden и вернуть измененный компонент
• Визуализировать компонент так, чтобы при 'скрытом' было установлено значение true, ничего не отображалось

У меня это работает для указанных c компонентов, как показано ниже в 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} />;
        }
    }
}

Однако я хотел бы превратить эти два класса в один HO C. Любые предложения?

РЕДАКТИРОВАТЬ: Я хотел бы, чтобы что-то общее c достаточно для обработки ВСЕХ типов компонентов в будущем, а не только эти два случая, поэтому я могу легко использовать HO C на других компонентах чем Fab и ButtonWithText.

Answer 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} />;
        }
    }
}