学习目标: 使模板中的逻辑跟简洁
实现: 复杂的多分枝的逻辑收敛为一个函数,通过一个专门的函数来写分支逻辑,模板中只负责调用
实例:
// 有一个状态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;
运行结果: