我不喜欢代码中有很多三元运算符。这就是为什么我制作了一个包含几个有用组件的库的原因。“ RcIf”

  <RcIf if={condition} >
    <h1>I no longer miss ngif</h1>
  </RcIf>
  <RcIf if={othercondition} >
    <h1>I no longer miss v-if</h1>
    <RcElse>
      <h1>I love react</h1>
    </RcElse>
  </RcIf>

您可以从npm安装它

https://www.npmjs.com/package/rc-if

我是Tersus-jsx.macro的创建者，我认为该模块提供了此问题的确切条件。

无需混合JSX表达式和ES6来实现ng-if或ng-repeat，此宏允许执行与AngularJS for React JSX中相同的操作，例如ng-if：

<div>
  <button
    tj-if={a === 0}
    id="gotoA"
    className="link"
    onClick={clicking}
  />
</div>

相当于

<div>
  {(a === 0) && (
    <button
      id="gotoA"
      className="link"
      onClick={clicking}
    />
  )}
</div>

Given that the latest version of create-react-app support Babel-Macro out of the box, all you need to do is npm install this module, wrap the render return with "tersus" and start assigning those props.

You can install this from: https://www.npmjs.com/package/tersus-jsx.macro

我也来自一个有角度的背景，并且正在寻找一种简单的衬纸来显示变量是否包含任何元素的标签。这为我工作：

<div className="comic_creators">
    {c.creators.available > 0 ? <h4>Creators</h4> : null }
    {c.creators.items.map((creator,key) =>
        <Creator creator={creator} key={key}></Creator>
    )}
</div>

false, null, undefined, and true are valid children. They simply don’t render. These JSX expressions will all render to the same thing:

So you can try this

const conditional=({condition,someArray})=>{
     return(
        <div>
          {condition && <Header /> // condition being boolean} 
          {someArray.length>0 && <Content />}
        </div>
      )
}

这对于有条件地渲染React元素很有用。此JSX仅呈现if条件为true，并且仅在someArray.length> 0时呈现

我只是想补充一点，*ngIf在angular中不会实例化它所连接的组件。在React中，如果您在语句中使用if语句，return则即使未显示该组件，它仍将实例化该组件。为了*ngIf在React中实现真正的类型行为，您必须创建一个变量，该变量将条件组件保留在return语句之外：

render() {

  const show = false

  return (
    if (show) {
       <AwesomeComponent />   //still instantiated
    }
  )
}

render() {

  let c = null
  const show = false

  if (show) {
    c = <AwesomeComponent />   //not instantiated
  }
  return (
    c
  )
}

如何三元运算符？

render() {
  return (
    this.props.showMe ? <button type="submit" className="btn nav-btn-red">SIGN UP</button> : null
  );
}

如果您还有其他元素，则可以像这样包装条件：

render() {
  return (
    <div>Stuff</div>
    {this.props.showMe && (
      <button type="submit" className="btn nav-btn-red">SIGN UP</button>
    )}
    <div>More stuff</div>
  );
}

更好一点：

render() {
  return (
    this.props.showMe && <button type="submit" className="btn nav-btn-red">SIGN UP</button>
  );
}