動態生成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>
    )
  }
}
複製代碼