仅当使用反应和打字稿条件为真时如何渲染 jsx？答案

【问题标题】：How to render jsx only when a condition is true using react and typescript?仅当使用反应和打字稿条件为真时如何渲染 jsx？
【发布时间】：2020-06-05 09:48:24
【问题描述】：

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

我想做什么？当变量 admin 为 true 时，计数

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

【问题讨论】：

除了其他答案之外，如果您的条件失败，您还可以使用警卫并返回null。例如render() {if (!myCondition) return null; return <button>...</button>}

标签： javascript reactjs

【解决方案1】：

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

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

【讨论】：

谢谢，但如果不是管理员和计数，则不会显示
@someuser2491 仔细检查了您的问题，并意识到我错过了另一个条件。我刚刚更新了我的答案。

【解决方案2】：

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

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

【讨论】：