【React】一、JSX的使用
1、react环境搭建
create-react-app是一个快速创建React开发环境的工具，底层由Webpack构建，封装了配置细节，开箱即用：
npx create-react-app 项目名
// npx Node.js工具命令，查找并执行后续的包命令
// create-react-app 核心包(固定写法)，用于创建React项目
运行效果：
react项目的其余创建方式：https://zh-hans.react.dev/learn/start-a-new-react-project
2、JSX
JSX，JavaScript和XML（HTML）的缩写，表示在JS代码中，写HTML。JSX是React中编写UI模板的方式，优势：
- HTML的声明式模板写法
- JS的可编程能力
JSX是JS语法的扩展，浏览器本身并不能识别，需要通过解析工具做解析之后才能在浏览器中运行：
2.1 JSX中使用JS表达式
在JSX中，通过大括号{ } 识别JavaScript中的表达式，可做：
- 使用引号传递字符串
- 使用JavaScript变量
- 函数调用和方法调用
- 使用JavaScript对象
if语句、switch语句、变量声明属于语句，不是表达式，不能出现在{}中
const count = 100
function getName() {
return "jack";
}
function App() {
return (
<div className="App">
this is App
{/*使用引号传递字符串*/}
{'this is message'}
{/*识别JS变量*/}
{count}
{/*函数调用*/}
{getName()}
{/*方法调用*/}
{new Date().getDate()}
{/*使用JS对象*/}
<div style={{color: 'red'}}>this is div</div>
</div>
);
}
运行：
2.2 JSX中实现列表渲染
在JSX中可以使用原生JS中的map方法遍历渲染列表
以上，需要注意，如果写成了：
const list = [
{id: 1001, name: "Vue"},
{id: 1002, name: "React"},
{id: 1003, name: "Angular"},
]
<ul>
{list.map(item => <li>{item.name}</li>)}
</ul>
console中就会看到有报错：
需要修改为：
<ul>
{list.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
这是因为JSX中，用JS原生map进行遍历渲染，需要做一个key绑定，这个key是react框架内部用，用于提升更新性能的，和开发者关系不大。总之，使用map遍历渲染时：
- 明确循环哪个结构，return哪个结构，如上面遍历list，return一个 li 标签
- 记得加上独一无二的key，这个key可以是一个字符串或者数字
2.3 JSX中实现条件渲染
实现条件渲染，可通过：
-
逻辑与运算&&
-
三元表达式 ？：
const isLogin = true;
function App() {
return (
<div className="App">
{isLogin && <span>欢迎登录</span>}
{isLogin ? <span>欢迎登录</span> : <span>请登录</span>}
</div>
);
}
效果：
2.4 JSX中实现复杂条件渲染
当条件较多时，使用上面的三元表达式就很不方便，此时，可以通过自定义函数+IF判断
需求：列表中需要根据文章状态适配三种情况，单图，三图，和无图三种模式
const articleType = 1 // 0 1 3
/*根据articleType返回不同的渲染模式，这里以div模拟*/
function getArticleTem() {
if(articleType === 0) {
return <div>我是无图文章</div>
} else if (articleType === 1) {
return <div>我是单图模式</div>
} else {
return <div>我是多图模式</div>
}
}
function App() {
return (
<div className="App">
{getArticleTem()}
</div>
);
}
效果：
原文地址：https://blog.csdn.net/llg___/article/details/143924407
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！