reactjs - React 中带有 'Variants' 的组件 - 条件渲染

Question

这里是非常基本的问题。

我正在尝试开始学习 React，我对处理这类事情的最佳设计模式感到好奇。

我有一个按钮组件，我想要应用不同类的组件的“主要”和“次要”变体。以下是解决此问题的最佳方法吗？我正在传递一个定义要使用哪个按钮的“变体” Prop 。

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

谢谢!

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