React、JSX简介、渲染列表、基础和复杂的条件渲染

最新推荐文章于 2024-07-24 15:37:02 发布

福星高照~

最新推荐文章于 2024-07-24 15:37:02 发布

阅读量441

点赞数 4

分类专栏： React 前端文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/atatsuki/article/details/140181590

版权

前端同时被 2 个专栏收录

26 篇文章 3 订阅

订阅专栏

React

1 篇文章 0 订阅

订阅专栏

一、简介

1、搭建环境

npx creat-react-app react-basic

其中，react-basic为项目名（自定义）

2、回到项目（VScode）

src中只留下App.js和index.js（要求其不报错，还能正常显示页面）

3、项目核心渲染路径

App -> index.js -> public/index.html（root）

4、网站资料（启动项目的方法）

https://zh-hans.react.dev/learn/start-a-new-react-project

二、JSX

JSX是JavaScript和XML(HTML)的缩写，表示JS代码中编写HTML模板结构，是react中编写UI模板的方式。JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中运行。

解析器网址：

https://babeljs.io/

Babel · Babel

在JSX中可以通过大括号语法{} 识别 JavaScript中的表达式，比如常见的变量、函数调用、方法调用等等。

1. 使用引号传递字符串

2. 使用JavaScript变量

3. 函数调用和方法调用

4. 使用JavaScript对象

注意：if语句、switch语句、变量声明属于语句，不是表达式，不能出现在{}中

三、实现渲染列表

1、先输入进去，实现3个一样的Vue

2.将Vue换成每一个的名字--->嵌套一个：{item.name}

3.在遍历渲染list时要求每一个都有独一无二的key,固定的，通常会用id来表示

const list = [
  { id: 1001, name: 'Vue' },
  { id: 1002, name: 'React' },
  { id: 1003, name: 'Angular' }

]


function App() {
  return (
    <div className="App">
      this is App
      {/*渲染列表*/}
      <ul>
        {list.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  )
}

export default App;

四、实现条件渲染

1.控制一个元素的显示和隐藏，用逻辑与

2.控制两个元素的话，用三元运算符

const isLogin = true


function App() {
  return (
    <div className="App">
      this is App
      {/*逻辑与&&*/}
      {isLogin && <span>this is span</span>}
      {/*三元运算*/}
      {isLogin ? <span>jack</span> : <span>loading</span>}
    </div>
  )
}

export default App;

3.如果三个、四个五个呢？如下：

五、实现复杂条件渲染

解决方案：自定义函数 + if判断语句

//定义文章类型
const articleTyple = 3  // 0 1 3 

//定义核心函数（根据文章类型返回不同的JSX模板）

function getArticleTem() {
  if (articleTyple === 0) {
    return <div>我是无图文章</div>
  }
  if (articleTyple === 1) {
    return <div>我是单图模式</div>
  }
  if (articleTyple === 3) {
    return <div>我是三图模式</div>
  }
}

function App() {
  return (
    <div className="App">
      {/* 调用函数渲染不同的模板 */}
      {getArticleTem()}
    </div>
  )
}

export default App;