javascript - 如何根据条件选择React组件道具(How to chose a React component props depending on condition)

Question

I have the following React component:(我有以下React组件：)

<SweetAlert show={this.props.message} success title={this.props.message} onConfirm={this.props.handleCloseAlert}> </SweetAlert> And this is the alert I get with it:(这是我得到的警报：) But I want the props success to be dynamically chosen at execution time, so I tried this:(但是我希望在执行时动态选择道具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> But I loose the alert type with it:(但是我用它松开了警报类型：) I haven't found a way for adding a discretional props to a component.(我还没有找到一种向组件中添加任意道具的方法。)   ask by HuLu ViCa translate from so

Answer 1

You should pass type as the returned value of your function(您应该将type作为函数的返回值)

<SweetAlert show={this.props.message} type={alertType()} title={this.props.message} onConfirm={this.props.handleCloseAlert}> </SweetAlert> Source of why passing success as a boolean worked(来源为何传球的success作为一个布尔工作)