反应，将HTML放在jsx中if-ese内

Question

我想在渲染中这样做：

return(
  <NavbarGroup>
    {user.demo ? '<span className="demo-top-title">Demo User</span>' : ''}
  </NavbarGroup>
etc...

但是我得到与文本相同的代码，而不是html。我不知道在这种情况下如何使用dangerouslySetInnerHTML

Answer 1

return(
  <NavbarGroup>
    {user.demo ? <span className="demo-top-title">Demo User</span> : ''}
  </NavbarGroup>
etc...

像这样使用。

Answer 2

出于完整性考虑，您可以使用&&短路：

return (
  <NavbarGroup>
    {user.demo && <span className="demo-top-title">Demo User</span>}
  </NavbarGroup>
)