JSX 模板精简原则

学习目标： 使模板中的逻辑跟简洁
实现： 复杂的多分枝的逻辑收敛为一个函数，通过一个专门的函数来写分支逻辑，模板中只负责调用
实例：

// 有一个状态type有1，2，3三种
// 1 展示 h1
// 2 展示 h2
// 3 展示 h3

const title = (type) =>{
    if(type === 1){
        return <h1>this is h1</h1>
    }
    else if(type === 2){
        return <h2>this is h2</h2>
    }
    else if(type === 3){
        return <h3>this is h3</h3>
    }
}
  return (
    <div className="App">
      {title(1)}
      {title(3)}
      {title(2)}
    </div>
  );
}

export default App;

运行结果：