如何仅在使用反应和 typescript 的条件为真时呈现 jsx？

Question

如果条件为真，我想渲染一个 jsx，使用三元运算符并使用 react 和 javascript。

我想做什么？ 当变量 admin 为 true 时，计数 < 0 我不想显示“添加”按钮。 并应在以下条件下显示

admin && count > 0
!admin 

下面是我的代码，

render = () =>{
    return (
        <button> add </button> //should render this based on condition
    )
}

有人可以帮我解决这个问题。 谢谢。

编辑：以下是要显示的条件

count > 0 && is_admin
count > 0 && !is_admin
count <0 && !is_admin

不显示的条件

count <0 && is_admin

Answer 1

对于这种情况，您可以使用短路评估：

render() {
    return (
      <>
        {((admin && count > 0) || !admin) && <button> add </button>}
      </>
    )
}

Answer 2

您可以简单地添加“&&”来有条件地渲染

render = () => {
    myCondition && (<button>test</button>)
}