Javascript JSX中的多If条件

当我的一个条件有两个不同的“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>}

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

{isNew？：}

我也有这个“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>;
        }

if（isNew）{
域_状态=；
}否则{
域\u状态=已启用&！isRowValid？
:
;
}

并试图做到这一点：

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

(()=> {
如果（是新的）{
返回添加图标；
}如果（！isNew&&enabled），则为else{
返回删除图标；
}else（！isNew&！enabled）
返回删除图标模式；
})
}

我希望能够并使用if条件，并且在其中一个条件为false时创建'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>
            )
        }
    }

renderAddButton（isRow）{
返回(
)
}
renderRemovebutton（isRow）{
const{onRemoveDomain}=this.props；
const{enabled}=this.state；
如果（！已启用）{
返回(
)
}否则{
返回(
)
}
}

{isNew？此.renderAddButton（isRowValid）：
此.renderRemovebutton（已启用、isRowValid、onRemoveDomain）
}

对多个零件进行条件渲染的好方法是为每个零件/条件创建函数，并在主渲染方法中使用它们

例如：

{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>}

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

class Comp.Comp组件{
renderButton（）{
if（true）{//此处的条件
返回btn
}
}
renderText（）{
if（true）{//此处的条件
返回“文本”
}
}
render（）{
返回(
这是常见的部分
{this.renderButton（）}
{this.renderText（）}
)
}
}

---

当然，您应该在

if

块中粘贴真实条件，而不是

true

。如果条件解析为falsy，则不会返回任何内容，因此在调用函数的特定位置不会呈现任何内容。

可以在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> 

您是否尝试过谷歌搜索或阅读过官方文档？是的，但没有找到我想要的东西。根据您的示例找到了解决方案！-非常感谢。