JSX

• 一、JSX 的基本使用
• • 1、使用步骤
  • 2、为什么脚手架中可以使用 JSX 语法？
• 二、JSX 中使用 JavaScript 表达式
• 三、JSX 的条件渲染
• 四、JSX 的列表渲染
• 五、JSX 的样式处理
• • 1、行内样式 —— style
  • 2、类名 —— className

一、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
}

运行结果为：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！