React全家桶 - 【React】 - 【1】JSX基础语法、列表渲染、条件渲染、事件绑定及传参

前言

什么是 JSX?

  • JSXJavaScriptXML(HTML) 的缩写,表示在 JS 代码中编写 HTML 结构 ,它是React中编写UI模板的方式;
  • 优势
    • HTML的声明式写法;
    • JS的可编程能力;

本质

  • JSX并不是标准的JS语法,它是JS的语法扩展,浏览器本身不能识别,需要通过解析工具做解析之后才能在浏览器中运行;
  • 🎯 解析工具 - babel
    • 铁子们可以自行去该网站写一些JSX,看解析出来是什么样;
    • 点击导航栏的 Try it Out ,进去之后需要将左侧的 recat 勾选上;

一、JSX中使用JS表达式

  • 在JSX中可以通过 大括号语法 {} 识别 JavaScript 中的 表达式 ;
    • 变量;
    • 函数调用;
    • 方法调用等等;
  • 四个高频场景:
    • 使用引号传递字符串;
    • 使用JS变量;
    • 函数调用和方法调用;
    • 使用JS对象;
jsx 复制代码
// 项目的根组件
const message = 'React 学习';
const obj = {
  name: '禁止摆烂'
};
const getName = () => obj.name + '_才浅';
function App() {
  return (
    <div>
      <h1>this is title</h1>
      {/* 使用引号传递字符串 */}
      {'好好学习 天天向上'}
      
      {/* 使用JS变量 */}
      {message}
      
      {/* 函数调用和方法调用 */}
      {getName()}
      {new Date().getTime()}
      
      {/* 使用JS对象 */}
      {/* 外层是识别表达式的语法,内层是识别的对象结构 */}
      <div style={{ color: 'red' }}>this is div</div>
    </div>
  );
}

export default App;
  • 注意
    • if语句、switch语句、变量声明属于语句,不是表达式,不能出现在{}中;

二、列表渲染

2.1 基本渲染

  • 语法
    • 在JSX中可以使用原生JS中的 map 方法遍历渲染列表;
  • 注意
    • 需要添加上一个独一无二的key;
    • key:string 或者 number
    • 作用:React内部使用,提升更新性能的;
  • 代码展示:

    jsx 复制代码
    const list = [
      { id: '1000', name: 'jQuery', flag: false },
      { id: '1001', name: 'Vue', flag: true },
      { id: '1002', name: 'React', flag: true },
      { id: '1003', name: 'Angular', flag: false }
    ];
    function App() {
      return (
        <ul>
          {/* map 循环哪个结构 return 哪个结构 */}
          {list.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      );
    }
    
    export default App;

2.2 基础条件渲染

  • 在 React 中,可以通过 逻辑运算符(&&)、三元表达式(?:) 实现基础的条件渲染;

  • 逻辑运算符(&&)

    • 控制单个标签的显示隐藏;
  • 三元表达式(?:)

    • 两个标签的切换;
  • 代码展示:

    jsx 复制代码
    const flag = true;
    function App() {
        return (
            <div>
                {/* 逻辑与 */}
                {flag && <span> 开始学习 React </span>}
                
                <br />
                
                {/* 三元运算 */}
                {flag ? <span> 看会小姐姐 </span> : <span> 玩会游戏 </span>}
            </div>
        );
    };

2.3 复杂条件渲染

  • 在实际的开发中,遇到的复杂条件渲染肯定是最多的,就比如下面这张图:
    • 这个怎么实现呢?
  • 需求:列表中要根据文章的状态适配三种情况:无图、单图、三图;
  • 解决方案:自定义函数 + if判断语句
jsx 复制代码
// 文章列表
const articleList = [
  { id: '1000', title: 'React 学习笔记', type: 0, src: [] },
  { id: '1001', title: 'Vue 学习笔记', type: 1, src: [1] },
  { id: '1002', title: 'JS 学习笔记', type: 3, src: [1, 2, 3] }
];

// 定义核心函数 - 根据文章类型返回不同的JSX模板
const getArticleTemplate = (item) => {
  if (item.type === 0) {
    return (
      <div key={item.id} style={{ border: '2px solid red' }}>
        <p>文章内容</p>
      </div>
    );
  } else if (item.type === 1) {
    return (
      <div key={item.id} style={{ display: 'flex', border: '4px solid green' }}>
        <div style={{ flex: 1 }}>
          <p>文章内容</p>
        </div>
        <div style={{ flex: 1 }}>
          <p>单图模式</p>
        </div>
      </div>
    );
  } else {
    return (
      <div key={item.id} style={{ border: '6px solid blue' }}>
        <p>文章内容</p>
        <ul style={{ display: 'flex', justifyContent: 'space-between' }}>
          {item.src.map((item) => (
            <li key={item}>{`第${item}张图`}</li>
          ))}
        </ul>
      </div>
    );
  }
};

function App() {
  return articleList.map((item) => getArticleTemplate(item));
}

export default App;

三、事件绑定

3.1 事件绑定基本语法

  • 语法

    • on + 事件名称 = {事件处理函数}
    • 整体上遵循 驼峰命名法
  • 代码展示:

    jsx 复制代码
    function App() {
        const onClick = () => {
            console.log(13);
        };
    
        return <button onClick={onClick}>React 中的事件绑定</button>;
    }
    
    export default App;

3.2 传递自定义参数

  • 语法

    jsx 复制代码
    <元素 on事件名称={() => 时间处理函数名(实参1, 实参2, 实参n)}/>
    • 事件绑定的位置改造成 箭头函数 的写法,在执行 实际处理业务函数的时候传递实参;
  • 注意

    • 如果要传递自定义参数,一定是要改写成箭头函数的形式;
    • 不能直接写成函数调用,这里事件绑定需要一个 函数引用
  • 代码展示:

    jsx 复制代码
    function App() {
        const onClick = (num) => {
            console.log(num, 13);
        };
        
        return <button onClick={() => onClick(10)}>React 中的事件绑定</button>;
    }
    
    export default App;

3.3 使用事件对象参数

3.3.1 单纯使用 事件对象

  • 语法

    • 在事件回调函数中设置形参 e
  • 代码展示:

    jsx 复制代码
    function App() {
        const onClick = (e) => {
            console.log(e);
        };
    
        return <button onClick={onClick}>React 中的事件绑定</button>;
    }
    
    export default App;

3.3.2 同时使用 事件对象 和 自定义参数

  • 语法

    • 在事件绑定的位置传递 事件实参e 和 自定义参数,在事件处理函数中声明形参,❗ 注意顺序对应
  • 代码展示:

    jsx 复制代码
    function App() {
        const onClick = (num, e) => {
            console.log(num, e, 13);
        };
    
        return <button onClick={(e) => onClick(10, e)}>React 中的事件绑定</button>;
    }
    
    export default App;
相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑9 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek