React/practise/04.模板精简原则.jsx

/* 有一个状态 type  1 2 3
1 对应 h1
2 对应 h2
3 对应 h3 */

/* 原则：模板中的逻辑尽量保持精简
复杂的多分支的逻辑，收敛为一个函数，通过一个专门的函数来写分支逻辑，模板中只负责调用即可 */

const getTitle = (type) => {
  if(type === 1) {
    return <h1>h1标题</h1>
  }
  if(type === 2) {
    return <h2>h2标题</h2>
  }
  if(type === 3) {
    return <h3>h3标题</h3>
  }
}

function App() {
  return (
    <div className="App">
      {getTitle(1)}
      {getTitle(2)}
      {getTitle(3)}
    </div>
  );
}

export default App;