如何根据条件选择 React 组件 props

Question

我有以下 React 组件：

<SweetAlert 
    show={this.props.message} 
    success 
    title={this.props.message}
    onConfirm={this.props.handleCloseAlert}>
</SweetAlert>

这是我收到的警报：

success但我希望在执行时动态选择道具，所以我尝试了以下方法：

 const alertType = () => {
    switch(this.props.type) {
        case ALERT_ERROR:
          return 'error'
        case ALERT_WARNING:
          return 'warning'
        case ALERT_DANGER:
          return 'danger'
        case ALERT_INFO:
          return 'info'
        case ALERT_SUCCESS:
          return 'success'
      }
    }

<SweetAlert 
    show={this.props.message} 
    {...alertType()}
    title={this.props.message}
    onConfirm={this.props.handleCloseAlert}>
</SweetAlert>

但我失去了它的警报类型：

我还没有找到向组件添加任意道具的方法。

Answer 1

您应该type作为函数的返回值传递

<SweetAlert 
    show={this.props.message} 
    type={alertType()}
    title={this.props.message}
    onConfirm={this.props.handleCloseAlert}>
</SweetAlert>

success作为布尔值传递的原因的来源