JSX 是 JavaScript 语法扩展,可以让你在 JavaScript 文件中书写类似 HTML 的标签。
所以JSX看起来像HTML,但是语法比HTML严格,比如只允许一个根节点,所有标签必须闭合,class属性要改成className等,参见使用 JSX 书写标签语言 – React 中文文档
JSX最强大的地方是可以在HTML里面写js代码
在 JSX 中通过大括号使用 JavaScript
在jsx中,大括号包裹的就是js代码,里面可以使用变量,方法,对象,如果要使用注释可以使用 {/*使用js变量*/}这种方式
javascript">function JSXTest() {let message = '这是一条消息'return (<div>{/*使用js变量*/}{message}<br/>{/*使用方法*/}{new Date().getDate()}<div style={{color: 'red'}}>这是js对象</div></div>);
}export default JSXTest;
列表渲染
列表渲染是项目中经常用到的技巧,比如我们从后台拿到商品数据,在前台渲染成一张表格等,react的列表渲染没有特别的语法,就是用的js数组里面的方法,比如将数据list变成li的集合,可以使用数组的map方法
<ul></ul>是jsx语法,在里面使用js要写大括号,在map的回调函数里面返回html代码,在js代码里面写html需要些小括号
javascript">function JSXTest() {return (<ul>{list.map(item => {return (<li key={item.id}>{item.name}</li>)})}</ul>);
}
完整代码,因为只有一行代码,回调函数里面的大括号,return,小括号都可以省略
javascript">let list = [{id: 1, name: 'Vue'},{id: 2, name: 'React'},{id: 3, name: 'Angular'}
]
function JSXTest() {return (<ul>{list.map(item=><li key={item.id}>{item.name}</li>)}</ul>);
}export default JSXTest;
技巧:记住js里面写html需要用小括号包裹,html里面写js需要用大括号包裹(吐槽:看的头疼,还是习惯vue的写法)
条件渲染
条件渲染也是很常用的技巧,根据变量来显示隐藏组件,常用的有两种方式,逻辑与和三元运算
javascript">let isLogin = truefunction JSXTest() {return (<div>{isLogin && <span>login page</span>}<br/>{isLogin? <span>has Login</span> : <span>loading...</span>}</div>);
}export default JSXTest;
复杂条件渲染
上面两种方式只能实现简单的条件渲染,要想实现复杂的效果可以使用方法
javascript">function getArticleItem(type) {if(type == 0) {return <div>无图模式</div>} else if(type == 1) {return <div>单图模式</div>} else {return <div>双图模式</div>}
}
function JSXTest() {return (<div>{getArticleItem(0)}{getArticleItem(1)}{getArticleItem(2)}</div>);
}export default JSXTest;