在React - Conditional渲染中包含“Variants”的组件

Question

这里有一个非常基本的问题。

我正在尝试学习React，我很好奇关于这类事情的最好的设计模式。

我有一个按钮组件，我想要应用不同类的组件的“主要”和“次要”变体。下面是不是最好的方法呢？我正在传递一个“变量”属性，它定义了使用哪个按钮。

如果这不是最好的解决方案，如果我想要特定组件的“变体”，那该怎么办呢？

谢谢!

class Button extends Component {

render() {

  // --- SECONDARY BUTTON --- //
  if(this.props.variant == 'secondary') {

    return (
      <div className = 'button-wrapper secondary'>
        <div className = 'button'>
          {this.props.text}
        </div>
      </div>
    );

  // --- PRIMARY BUTTON --- //
  }else if(this.props.variant == 'primary') {

    return (
      <div className = 'button-wrapper primary'>
        <div className = 'button'>
          {this.props.text}
        </div>
      </div>
    );
  }
}
}

Answer 1

如果您的不同之处仅仅在于className，也许您可以通过以下方式实现相同的目的：

render() {
 const { variant } = this.props;
 return (
   <div className = {`button-wrapper ${ variant === 'secondary' ? '' : 'primary' }`}>
     <div className = 'button'>
       {this.props.text}
     </div>
   </div>
 );