javascript - 在 React 中创建组件参数的最佳方法是什么？

Question

我想创建简单、流行的组件类型:一个用于创建/更新某些业务对象的组件。当然在这种类型的组件中我们有两种模式:add 和edit。

显而易见的解决方案是属性和文本值。

<Foo mode="add"/>
<Foo mode="edit"/>

我在想是否有任何巧妙的方法来公开模式，以便开发人员可以从一些指定的值中进行选择？

我试图找到一些示例，但似乎这种“文本参数”方法在某种程度上很受欢迎。例如在 material ui按钮的模式/类型以相同的方式完成(variant 属性):

<Button variant="fab" color="secondary" aria-label="Edit" className={classes.button}>
    <Icon>edit_icon</Icon>
</Button>
<Button variant="extendedFab" aria-label="Delete" className={classes.button}>
    <NavigationIcon className={classes.extendedIcon} />
    Extended
</Button>

有没有更好的办法？是否可以创建一些方便的枚举或类似的东西？

更新

问题不在于如何实现组件的模式，而在于如何更巧妙地指定模式。例如代替

<Foo mode="add"/>
<Foo mode="edit"/>

我想要这样的东西:

<Foo mode={FooModes.add}/>
<Foo mode={FooModes.edit}/>

或

<Foo edit/>
<Foo add/>

Answer 1

我会那样做的:)

export default class myAmazingComponent extends Component {

  constructor(props) {
    super(props);
  }

  generateComponent = (mode) => {
    switch(mode) {
      case 'FOO' :
        return <div>FOO Mode is activated</div>;
      case 'BAR' :
        return <div>BAR Mode is activated</div>;
      default:
        return <div>DEFAULT mode</div>
    }
  }

  render() {
    const { mode } = this.props;
    return (
      this.generateComponent(mode)
    )
  }
}