如何僅在使用反應和 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>)
}