React 中带有“变体”的组件 - 条件渲染

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