JSX 中的多个 If 条件答案

【问题标题】：Multiple If conditions in JSXJSX 中的多个 If 条件
【发布时间】：2019-09-02 18:48:06
【问题描述】：

当我的条件之一有 2 个不同的“onClick”事件时，我在代码中的 JSX Return() 中遇到了“If”问题。我有 2 个“a”标签，如果声明为真，其中一个将显示按钮“X”，如果不是，另一个将显示按钮“Y”。它们都有一个“onClick”事件。

例如：

{isNew ? <a id="add_domain" className={cx({ "disabled": 
!isRowValid })} onClick={this.onAddRow}><i className="fa fa-lg fa-plus-circle"/></a> : <a id="delete_domain" className={cx({ "disabled": enabled || !isRowValid })} onClick={onRemoveDomain}><i className="fa fa-lg fa-times-circle"/></a>}

我也有这个'a'标签，我想添加它以防'！启用'，

<a id="remove_domain" className={cx({ "disabled": !enabled || !isRowValid })} onClick={this.openModal}><i className="fa fa-lg fa-times-circle"/></a>}

我尝试了以下方法：

if (isNew) {
            domain_status = <a id="add_domain" className={cx({ "disabled": !isRowValid })} onClick={this.onAddRow}><i className="fa fa-lg fa-plus-circle"/></a>;
        } else {
            domain_status = enabled && !isRowValid ?
               <a id="delete_domain" className={cx({ "disabled": !enabled || !isRowValid })} onClick={this.openModal}><i className="fa fa-lg fa-times-circle"/></a> :
               <a id="delete_domain" className={cx({ "disabled": enabled || !isRowValid })} onClick={this.onRemoveDomain}><i className="fa fa-lg fa-times-circle"/></a>;
        }

并且也尝试过这样做：

<div>
(()=> {
if (isNew) {
   return add_icon;
 } else if (!isNew && enabled) {
   return remove_icon;
 } else (!isNew && !enabled)
   return remove_icon_modal;
 })
}
</div>

如果条件之一为假，我希望能够并使用 if 条件来创建 'onClick' 事件的 2 个选项。

找到解决方案：

    renderAddButton (isRow){
        return (
            <a id="add_domain" className={cx({ "disabled": !isRow })} onClick={this.onAddRow}><i className="fa fa-lg fa-plus-circle"/></a>
        )
    }

    renderRemovebutton (isRow){
        const {onRemoveDomain} = this.props;
        const {enabled} = this.state;
        if(!enabled) {
            return (
                <a id="delete_domain" className={cx({ "disabled": enabled })} onClick={onRemoveDomain}><i className="fa fa-lg fa-times-circle"/></a>
            )
        } else {
            return (
                <a id="delete_domain" className={cx({ "disabled": !enabled || !isRow })} onClick={this.openModal}><i className="fa fa-lg fa-times-circle"/></a>
            )
        }
    }

<td className="table-action">
  { isNew ? this.renderAddButton(isRowValid):
   this.renderRemovebutton(enabled, isRowValid, onRemoveDomain)
  }
</td>

【问题讨论】：

你试过google搜索或阅读官方文档吗？
是的，但没有找到我想要的东西。

标签： javascript html reactjs if-statement jsx

【解决方案1】：

多个部分的条件渲染的好方法是为每个部分/条件创建函数并在主渲染方法中使用它们。

例如：

class Comp extends React.Component {
    renderButton() {
        if (true) { // condition here
            return <button>btn</btn>
        }
    }

    renderText() {
        if (true) { //condition here
            return 'Text'
        }
    }

    render() {
       return (
           <div>
               <p>this is common part </>
               { this.renderButton() }
               { this.renderText() }
           </div>
       )
    }
}

当然，您应该在 if 块中粘贴真实条件而不是 true。如果条件解析为虚假，则不返回任何内容，因此在您调用该函数的特定位置不会呈现任何内容。

【讨论】：

根据您的示例找到了解决方案！ - 谢谢！

【解决方案2】：

您可以在 onClick 中使用三元组。

<a id="delete_domain" className={cx({ "disabled": !enabled || !isRowValid })} 
   onClick={enabled && !isRowValid ? this.openModal : this.onRemoveDomain}>
     <i className="fa fa-lg fa-times-circle"/>
</a>

【讨论】：