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

2023年1月27日 184次阅读

我想创建简单,流行的组件类型：创建/更新某些业务对象的组件.当然,在这种类型的组件中,我们有两种模式：添加和编辑.

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

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

我在想是否有任何简洁的方式来暴露模式,以便开发人员可以从一些指定的值中选择？

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

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

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

UPDATE

问题不在于如何实现组件模式,而在于如何更整齐地指定模式.例如,而不是

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

我想要这样的东西：

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

要么

<Foo edit/>
<Foo add/>

最佳答案 我会做那样的……

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)
    )
  }
}
点赞