如何对组件进行分组

Question

我有React JSapp，我有很多不同风格的按钮组件（我特意把它分开，以提高可读性），例如：普通、概述、文本、链接和其他。我想创建一个特殊的组件，在其中我将传递proptype，component将返回我需要的按钮组件。现在我制作了这个组件，但我必须传递我可能不需要的道具。我如何解决这个问题，或者你知道分组的不同实现方式？

分组组件：

import {NormalButton} from './NormalButton'
import {OutlinedButton} from './OutlinedButton'

export interface IMainButton{
    text: string
}

interface IButton extends IMainButton{
    type: 'normal' | 'outlined'
}

export const Button: React.FC<IButton> = (props) => {

    const returnButton = () => {
        switch(props.type){
            case 'normal':{
                return NormalButton
            }
            case 'outlined':{
                return OutlinedButton
            }
        }
    }

    return(
        <>
            {
                React.createElement(returnButton(), {text: props.text})
            }
        </>
    )
}

Answer 1

null

在此之后，您需要做的就是创建特定的css类以提供适当的样式