持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情
上一篇文章中我们介绍了如何在react中使用JSX，并且介绍了JSX是React的核心内容，接下来将介绍如何在JSX中使用JavaScript表达式以及JSX的条件渲染以及JSX的列表渲染
JSX中使用JavaScript表达式
- 嵌入JavaScript表达式
- 数据存储在JavaScript中
- 语法：JavaScript表达式
- 注意：语法中是单大括号，不是双大括号
- 这里有一点像vue中的插值表达式{{}}
- 示例如下所示：
const name = 'Jack'
const dv = {
<div>你好,我叫{name}</div>
}
这样我们浏览器中就会展示：你好，我叫Jack,就可以把Jack这个名字渲染到{}中
- 一些注意点
- 单大括号中可以使用任意的JavaScript表达式
- JSX自身也是JS表达式
- 注意：JavaScript中的对象是一个例外，一般只会出现在style的属性中
- 注意：不能在{}中出现语句（比如:if/for等等）
const h1 = <h1>我是JSX</h1>
const dv = {
<div>嵌入表达式：{h1}</div>
}
JSX的条件渲染
- 场景：loading效果
- 条件渲染：根据条件渲染特定的JSX结构
- 可以使用if/else或者三元运算符或者逻辑运算符来实现
- 示例代码如下所示：
const loadData = () => {
if(isLoading){
return <div>数据加载中，请稍后...</div>
}
return{
<div>数据加载完成，此处显示加载之后的数据</div>
}
}
const dv = {
<div>{loadData}</div>
}
JSX的列表渲染
- 如果需要渲染一组数据，应该使用数组的map（）方法
- 注意：渲染列表的时候应该添加key属性，这里和vue是一样的，key的属性的值需要保证是唯一的
- 原则：map()遍历谁，就给谁添加key属性
- 注意：尽量避免使用索引号来作为key属性
- 示例代码如下所示：
{id:1,name:'张三'}，
{id:2,name:'李四'}
]
const list = (
<ul>
{names.map(item =><li key={item.id}>{item.name}</li>)}
</ul>
)
