标签：---- const name 渲染 JavaScript React 使用 JSX
JSX
一、JSX 的基本使用
React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
不需要一定使用 JSX，但它有以下优点：
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
1、使用步骤
（1）使用 JSX 语法创建 react 元素
// 使用 JSX 语法，创建 react 元素：
const title = <h1>Hello JSX</h1>
（2）使用 ReactDOM.render() 方法渲染 react 元素到页面中
// 渲染创建好的React元素
ReactDOM.render(title, root)
如下所示：
2、为什么脚手架中可以使用 JSX 语法？
1.JSX 不是标准的 ECMAScript 语法，它是 ECMAScript 的语法扩展。
2. 需要使用 babel 编译处理后，才能在浏览器环境中使用。
3. create-react-app 脚手架中已经默认有该配置，无需手动配置。
4. 编译 JSX 语法的包为：@babel/preset-react 。
二、JSX 中使用 JavaScript 表达式
可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下
const name = '王欢'
const dv = (
<div>你好，我叫：{name}</div>
)
如下所示：
const name = '王欢'
const dv = (
<div>你好，我叫：{name}</div>
)
ReactDOM.render(dv,document.getElementById('root');
打印结果为：
需要注意的是：
- 单大括号中可以使用任意的 JavaScript 表达式
- JSX 自身也是 JS 表达式
- JS 中的对象是一个例外，一般只会出现在 style 属性中
- 不能在{}中出现语句（比如：if/for 等）
三、JSX 的条件渲染
场景：loading效果
条件渲染：根据条件渲染特定的 JSX 结构
可以使用if/else或三元运算符或逻辑与运算符来实现。
如下所示：
const loadData = ()=>{
if(isloading){
return <div>loading...</div>
}else{
return <div>数据加载完成，此处显示加载后的数据</div>
}
}
const title = (
<h1>条件渲染:{loadData()}</h1>
)
ReactDOM.render(title,document.getElementById('root'))
当我们设置isloading为true时，则有：
当我们设置isloading为false时,有：
四、JSX 的列表渲染
如果要渲染一组数据，应该使用数组的 map() 方法；渲染列表时应该添加 key 属性，key 属性的值要保证唯一。
原则：map() 遍历谁，就给谁添加 key 属性
注意：尽量避免使用索引号作为 key。
如下：
const songs = [
{id: 1, name: '小欢'},
{id: 2, name: '小冉'},
{id: 3, name: '小刘'},
{id: 4, name: '小熊'}
]
const list = (
<ul>{songs.map(item => <li key={item.id}>{item.name}</li>)}
</ul> )
ReactDOM.render(list,document.getElementById('root'))
打印结果为：
五、JSX 的样式处理
1、行内样式 —— style
代码格式如下：
<h1 style={{ color: 'red', backgroundColor: 'skyblue' }}>
JSX的样式处理
</h1>
如下：
2、类名 —— className
代码格式为：
<h1 className="title">
JSX的样式处理
</h1>
如下：
在index.css文件中添加：
.title{
text-align:center
}
运行结果为：
标签：----,const,name,渲染,JavaScript,React,使用,JSX 来源： https://blog.csdn.net/m0_48375854/article/details/122721136
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。