React JSX 使用条件语句渲染UI的两种写法

只针对函数组件

1. 第一种写法：

function App({ id }) {return id==1? <h1>hello</h1> : <h1>world</h1>;
}

或者：

function App({ id }) {return (<h1>{id==1 && "hello" || id==2 && "world" || "unknown"}</h1>)
}

2. 如果需要条件细分，第二种写法

function App({ id }) {let content = ""if (id==1) {content = "hello" //如果包含html标签，默认会被转义}else if (id==2) {content = "world"}return (<h1>{content}</h1>);
}

3. 第三种写法：

function App({ id }) {return (<h1>{(()=>{if (id==1) {return "hello"}else if (id==2) {return "world"}})()}</h1>);
}

switch同理:

function App({ id }) {return (<h1>{(()=>{switch(id) {case 1:return "hello"case 2:return "world"default:return "unknown"}})()}</h1>);
}