Javascript 如何使用三元运算符使用react呈现jsx？

我想使用react根据条件呈现jsx

如果条件1和条件2应显示“添加”按钮。 如果条件1和！条件2应显示“单击我”按钮

下面是我的代码

render = () => {
    return (
        {condition1 && condition2 && (
            <button>add</button>
        )}
        {condition1 && !condition2 && (
            <button>click me </button>
        )}
    );
}

render=（）=>{
返回(
{condition1&&condition2&&(
添加
)}
{condition1&！condition2&&(
点击我
)}
);
}

如何使用三元运算符重写上述代码。有人能帮我修一下吗。谢谢。

条件1和条件2？添加：点击我；
condition1 && condition2 ? <button>add</button> : <button>click me </button>;

你可以这样写-

{condition1 ? 
  (condition2 ? 
    (<button>add</button>) : (<button>click me </button>) 
  ) : null}

{condition1？
（第2条？
（添加）：（单击我）
)：null}

注意-有时ES Linter会因为在JSX渲染方法中使用嵌套的三元运算符而发出警告。所以请记住这一点

返回（（条件1和条件2）（添加）：（（条件1和条件2）（单击我）：（））；

这样做比嵌套三元运算符更简洁。虽然此代码可能会解决OP的问题，但最好包含关于代码如何解决OP问题的解释。通过这种方式，未来的访问者可以从您的帖子中学习，并将其应用到自己的代码中。因此，它不是一种编码服务，而是一种知识资源。此外，高质量、完整的答案更有可能被提升。这些特性，以及所有帖子都是独立的要求，是SO作为一个平台的一些优势，使其区别于论坛。您可以编辑以添加其他信息和/或使用源文档补充说明。

return ((condition1 && condition2)?(<button>add</button>):((condition1 && !condition2)?(<button>click me </button>):()));