【React】JSX基础知识

2024/11/30 12:45:48 来源：https://blog.csdn.net/weixin_44109827/article/details/142437942 浏览: 次关键词：【React】JSX基础知识

1. JSX的本质

JSX并不是标准的js语法，而是js语法扩展，浏览器本身无法识别，需要进行解析。解析工具：babel

2. JSX使用的4个高频场景

使用引号传递字符串
使用js变量
函数调用和方法调用
使用js对象

function App() {const jsVar = 1314function Func() {return '这是一个函数'}return (<div className="App">this is App<br/>{'使用引号传递字符串'}<br/>{jsVar}<br/>{Func()}<br/>{new Date().getTime()}<br/><div style={{color: 'pink'}}>我变粉色啦</div></div>);
}export default App;

在这里插入图片描述

3. JSX实现列表渲染

**语法：**使用原生js中的map方法遍历渲染列表

function App() {const list = [{ id: '001', content: '刘能' },{ id: '002', content: '赵四' },{ id: '003', content: '谢广坤' },]return (<div className="App">乡村爱情中最搞笑的3个男人：<ul>{list.map((item) => {// 注意：需要加上一个唯一的keyreturn <li key={item.id}>{item.content}</li>})}</ul></div>);
}export default App;

在这里插入图片描述

4. JSX的条件渲染

4.1 简单的

语法：可以使用逻辑与运算符&&、三元表达式?:实现

function App() {const isLoading = trueconst isLogin = falsereturn (<div className="App">{isLoading && <div>加载中</div>}{isLogin ? <span>已登录</span> : <span>未登录</span> }</div>);
}export default App;

在这里插入图片描述

4.2 复杂的

需求：根据文章状态（单图，三图和无图）适配3种情况
解决：自定义函数 + if语句

function App() {const articleType = 0function getArticleTem() {if (articleType === 0) {return <div>无图模式</div>} else if (articleType === 1) {return <div>单图模式</div>} else {<div>多图模式</div>}}return (<div className="App">{getArticleTem()}</div>);
}export default App;