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

Answer 2

我不确定我是否正确理解了您的问题，但是在我看来，您正在尝试有条件地渲染某些内容。

我通常为此做的就是在自己的类属性/方法中包含两种类型的内容，如下所示：

optionA = () => {
  // return the component in style A here
}
optionB = () => {
  // return the component in style B here
}

render() {
  return(
    <div>
      {this.props.mode === 'add' ? optionA() : optionB()
    </div>
  )
}

这样，您可以根据传递的道具来渲染任一选项。（如果“添加”，将呈现optionA（）返回的JSX，否则将呈现optionB（）的输出）

这也是一个非常简单的示例，说明了我喜欢如何构造我的组件，希望在这里获得反馈！

React的文档确实非常好，您可以在这里找到有关条件渲染的更多信息：https://reactjs.org/docs/conditional-rendering.html

希望这对您有帮助

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

2 个答案: