动态生成generate component react js

1.if-else

export default function App(props){
  if(props.phrase === "greeting"){
    return(
       <h1>Hello</h1>
    )
  } else {
    return(
        <h1>Good Bye</h1>
    )
  }
}

2.Ternary

export default function App(props){
  return(
    <div>
      { props.phrase === "greeting"
        ? <h1>Hello</h1>
        : null
      }
    </div>
  )
}

3.Ampersand (&&)

export default function App(props){
  return(
    <div>
      { props.phrase === "greeting" && <h1>Hello</h1> }
    </div>
  )
}

4.Switch

export default function App(props){
  return(
    {(() => {
      switch(props.phrase) {
        case 'greeting':
          return <h1>Hello</h1>
        case 'question':
          return <h1>What's up?</h1>
        case 'farewell':
          return <h1>Good Bye</h1>
        default:
          return null
        }
      })()}
    }
  )
}

export default function App(props){
  let phraseJSX
  switch(props.phrase) {
    case 'greeting':
      return phraseJSX = <h1>Hello</h1>
    case 'question':
      return phraseJSX = <h1>What's up?</h1>
    case 'farewell':
      return phraseJSX = <h1>Good Bye</h1>
    default:
      return null
  }
  
  return(
    <div>
      {phraseJSX}
    </div>
  )
}

5.block

export default class BlocksLoop extends Component {
  render() {
    return (
      <div className="blocks_loop">
        {this.props.blocks.map(block => (
          <div className="block" />
        ))}
      </div>
    )
  }
}