反应：内联if条件，然后显示此div

Question

我可以创建一个基于const的react组件。

const MyComp = (prop) => ... etc

其中有一些JSX：

<div id="myDiv">
        Stuff Here
</div>

我有一个正确的道具，叫做myprop。

所以我想添加一个条件myDiv ...，例如：

<div id="myDiv" {if myprop === true}>
        Stuff Here
</div>

以便div仅在prop为true时显示。

如何在React中做到这一点？

Answer 1

如果我正确理解了您的问题，则可以使用以下JSX语法来实现：

{ (myprop === true) && <div id="myDiv">
        Stuff Here
   </div>
}

总结一下正在发生的事情，这实际上是一个表达式，表示“如果myprop === true”，则“渲染div”

Answer 2

如@DacreDenny所说，但我可以进一步将其简短化

{myprop && <div id="myDiv">Stuff Here</div>}