1.在JSX中可以通过 大括号语法{}
识别JavaScript中的表达式,比如常见的变量、函数调用、方法调用等等
const message = 'this is message' function getAge(){ return 18 } function App(){ return ( <div> <h1>this is title</h1> {/* 字符串识别 */} {'this is str'} {/* 变量识别 */} {message} {/* 函数调用 渲染为函数的返回值 */} {getAge()} </div> ) }
2.在JSX中可以使用原生js种的map方法
实现列表渲染
const list = [ {id:1001, name:'Vue'}, {id:1002, name: 'React'}, {id:1003, name: 'Angular'} ] function App(){ return ( <ul> {list.map(item=><li key={item.id}>{item}</li>)} </ul> ) }
3.在React中,可以通过逻辑与运算符&&、三元表达式(?:) 实现基础的条件渲染
const flag = true const loading = false function App(){ return ( <> {flag && <span>this is span</span>} {loading ? <span>loading...</span>:<span>this is span</span>} </> ) }
4.自定义函数渲染
const type = 1 // 0|1|3 function getArticleJSX(){ if(type === 0){ return <div>无图模式模版</div> }else if(type === 1){ return <div>单图模式模版</div> }else(type === 3){ return <div>三图模式模版</div> } } function App(){ return ( <> { getArticleJSX() } </> ) }标签:function,return,type,App,基础,const,JSX From: https://www.cnblogs.com/zhaohaha/p/18306884