React02-JSX 语法

这篇具有很好参考价值的文章主要介绍了React02-JSX 语法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、React 基础知识

1. React.createElement

React.createElement 是 jsx 语法的编译结果,这个函数用来创建一个 React 元素,它的返回值是一个 Virtual DOM(虚拟DOM)。

React.createElement(type, props, ...children)

第一个参数为元素类型,可以是标签名或组件名,第二个参数为元素属性,第三个参数为子节点列表。

const html1 = <h1>hello</h1>;
const html2 = React.createElement('h1', null, 'hello');

以上2种写法是等价的,可以看到使用 jsx 语法更加简介直观。

2. ReactDOM.render

ReactDOM.render(cpn, dom) 方法用来将一个 react 组件渲染到 DOM 元素上。

第一个参数为要渲染的组件,可以是 jsx 语句;第二个参数为要渲染到的真实 DOM 元素。

ReactDOM.render(<h1>hello</h1>, document.getElementById('reactApp'));

二、定义组件

1. 类组件

使用关键字 class 定义的组件。需要继承 React.Component 类,重写 render 方法,在 render 方法中返回 jsx 语法定义的组件。

// 类组件
export default class Person extends React.Component {
  render() {
    return <div>hello world</div>;
  }
}

2. 函数组件

使用关键字 function 定义的组件。返回 jsx 语法定义的组件。

export default function Person() {
  return <div>hello web</div>;
}

3. 注意事项

(1) 组件名的首字母必须大写,首字母大小写是 react 区分组件和普通标签的方法。

(2) 组件中返回的 jsx 代码必须有且只有1个顶层标签。

4. 组件嵌套

父组件嵌套子组件,将子组件的组件名当作标签名按标签的方式使用即可。

// 子组件
function Son() {
  return <div><p>这是子组件</p></div>;
}

// 父组件
export default function Father() {
  // return <div><h3>这是父组件</h3><Son></Son></div>;
  return <div><h3>这是父组件</h3><Son /></div>; // 和上面一句写法等价
}

注意: 组件当作标签使用的时候,必须是闭合标签。

三、JSX 语法

JSX 是 JS 的扩展语言,本质还是 JS。

1. 表达式

jsx 使用 { expression } 的方式获取表达式的值。

在 jsx 中如果需要使用 js 表达式,需要写在花括号({})内。

const name = 'zhangsan';
export default function Person() {
  return <div><h3>{ name }</h3></div>;
}

在页面渲染时,name 会被渲染成 zhangsan。

jsx 本身也是一个表达式,可以定义一个 jsx 表达式变量,可以在创建组件时直接返回此变量。

const name = 'lisi';
const html = <div><h3>{ name }</h3></div>;
export default function Person() {
  return html;
}

2. 属性

此外,还可以在 jsx 中加入属性。

export default function Person() {
  return <div id="div"><h3></h3></div>;
}

如果我们直接用 html 的方式定义属性,那渲染到页面后,Person 组件中 div 的 id 就是 div。

如果想要用表达式作为属性值,同样也是使用花括号。

const div = 'div1';
export default function Person() {
  return <div id={div}><h3></h3></div>;
}

这时 div 的 id 就为 div1。

无论在 jsx 内容还是属性或者是 jsx 本身,都可以使用 js 表达式。

3. className

jsx 中不能使用 class 给元素添加类名。jsx 中 jsx 本身也是 js,在 js 中 class 是 js 的关键字,因此需要使用 className 给元素添加类名。

const div = 'div1';
const className = 'div2';
export default function Person() {
  return <div id={div} className={ className }><h3></h3></div>;
}

这时 div 就有了一个 class 为 div2。

4. jsx 自动展开数组

在 jsx 中,数组会自动进行展开。

const arr = ['zhangsan', 'lisi', 'wangwu'];
export default function Person() {
  return <div>{ arr }</div>;
}

此时页面上将渲染出 zhangsanlisiwangwu:

React02-JSX 语法,react,react,前端

也可以使用数组来渲染一组标签:

const arr = [<p key='1'>c++</p>, <p key='2'>python</p>, <p key='3'>php</p>];
export default function Person() {
  return <div>{ arr }</div>;
}

在页面上将渲染为一组 p 标签:

React02-JSX 语法,react,react,前端

 5. 三元运算

在 jsx 中可以使用三元表达式来控制某个元素是否渲染。

const bl = true;
export default function Person() {
  return <div>{ bl ? <h3>hello world</h3> : null }</div>;
}

当 bl 为 true 时,页面上会渲染出 h3 标签;当 bl 为 false 时,就不渲染。

这个功能还有一种更简单的方式:

const bl = true;
export default function Person() {
  return <div>{ bl && <h3>hello world</h3> }</div>;
}

使用且运算,当 bl 会真时,继续向后运算;bl 为假时,就终止。

6. 循环

要在 jsx 中使用循环,需要使用 map。

const arr = [{ id: 1, name: 'zhangsan', age: 10 }, { id: 2, name: 'lisi', age: 15 }, { id: 3, name: 'wangwu', age: 20 }];
export default function Person() {
  return <div>
    <ul>
      { arr.map(item => <li key={ item.id }>{ item.name },{ item.age }</li>) }
    </ul>
  </div>;
}

7. 事件

on + 事件名 给组件标签添加事件。

  • 事件名的首字母必须大写。
  • 类组件中的 jsx 中的 this 指向实例对象。
export default function Person() {
  function fn() {
    console.log('hello world');
  }
  return <div>
    <button onClick={fn}>按钮</button>
  </div>;
}

点击按钮时,控制台就会打印出 hello world。

可以给函数 fn 传递参数,遵循以下规则。

函数传参:

(1) 默认传递一个参数事件对象

按钮的点击事件会默认传入一个事件对象,我们可以使用一个参数来接收。

export default function Person() {
  function fn(e) {
    console.log(e); // SyntheticBaseEvent 事件对象
  }
  return <div>
    <button onClick={fn}>按钮</button>
  </div>;
}

(2) 通过箭头函数自定义传参

export default function Person() {
  function fn(e, a) {
    console.log(e); // SyntheticBaseEvent 事件对象
    console.log(a); // hello
  }
  return <div>
    <button onClick={(event) => fn(event, 'hello')}>按钮</button>
  </div>;
}

这里我们使用一个箭头函数作为按钮的点击事件,接收事件对象并和其他参数一起传递给 fn。

(3) 通过 bind 方法

export default function Person() {
  function fn(e, a) {
    console.log(e); // world
    console.log(a); // SyntheticBaseEvent 事件参数
  }
  return <div>
    <button onClick={fn.bind(null, 'world')}>按钮</button>
  </div>;
}

使用 bind 方法也可以实现自定义传参,此时第一个参数为 bind 方法传入的 world,第二个参数是事件对象。文章来源地址https://www.toymoban.com/news/detail-524729.html

到了这里,关于React02-JSX 语法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React【React是什么?、创建项目 、React组件化、 JSX语法、条件渲染、列表渲染、事件处理】(一)

           React是什么? 为什么要学习React  React开发前准备  创建React项目 

    2024年02月11日
    浏览(52)
  • React入门 - 07(说一说 JSX 中的语法细节)

    本章内容 上一节内容我们完成了一个简单的 TodoList 案例。到现在为止我们已经知道怎么在 JSX 中使用 “js 表达式”和”列表渲染“了,本节我们继续使用之前的工程项目来编写代码,补充在 React 使用 JSX 语法的一些细节。 JSX 中使用表达式: { JS 表达式 } 可使用的 js 表达式

    2024年01月17日
    浏览(37)
  • 初识React: 基础(概念 特点 高效原因 虚拟DOM JSX语法 组件)

    React是一个由Facebook开源的JavaScript库,它主要用于构建用户界面。React的特点是使用组件化的思想来构建界面,使得代码的可复用性和可维护性大大提高。React还引入了虚拟DOM的概念,减少了对真实DOM的直接操作,加快了渲染速度。 React使用虚拟DOM,将页面的渲染操作转化为

    2024年02月14日
    浏览(55)
  • 前端react入门day01-了解react和JSX基础

     (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 React介绍  React是什么 React的优势  React的市场情况  开发环境搭建  使用create-react-app快速搭建开发环境 尝试运行程序  react基本框架  index.js App.js JSX基础-概念和本质

    2024年02月08日
    浏览(74)
  • 【前端知识】React基础巩固(二)——JSX注意点

    createElement存在的问题: 繁琐不简洁 不直观,无法一眼看出所描述的结构 不优雅,开发体验不好 JSX 简介:JSX 是 JavaScript XML 的简写,表示了在JS代码中写XML(HTML)格式的代码 优势:声明式语法更加直观,与HTML结构相同,降低学习成本,提高开发效率 JSX 是 react 的核心内容‘

    2024年02月09日
    浏览(69)
  • 【前端知识】React 基础巩固(十四)——JSX 的转换过程和声明式编程

    jsx 仅仅只是 React.createElement(component, props, …children)函数的语法糖 所有的 jsx 最终都会被转换成 React.createElement 的函数调用 createElement 需要传递三个参数: type 当前 ReactElement 的类型 如果是标签元素,那么就使用字符串表示 “div” 如果是组件元素,那么就直接使用组件的名称

    2024年02月09日
    浏览(82)
  • 前端react入门day02-React中的事件绑定与组件

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 React中的事件绑定 React 基础事件绑定 使用事件对象参数  传递自定义参数  同时传递事件对象和自定义参数  React中的组件  组件是什么 React组件 useState  修改状态的规

    2024年02月06日
    浏览(85)
  • 【React】‘React‘ must be in scope when using JSX react/react-in-jsx-scope

    React 报错: 意思是在使用 JSX 时,没有引入 React ,比如像这样: 在使用 import 引入时,没有引入 React 。所以在被 Eslint 的 \\\"plugin:react/recommended\\\" 检查时,就会报错。 于是很多人就选择引入的时候加上 React ,这样 这样确实不报错了,但是他们忽略了一个版本事实: 在 React@17

    2024年02月15日
    浏览(41)
  • 【react从入门到精通】React JSX详解

    ✍创作者:全栈弄潮儿 🏡 个人主页: 全栈弄潮儿的个人主页 🏙️ 个人社区,欢迎你的加入:全栈弄潮儿的个人社区 📙 专栏地址:react从入门到精通 【分享几个国内免费可用的ChatGPT镜像】 【10几个类ChatGPT国内AI大模型】 【用《文心一言》1分钟写一篇博客简直yyds】 【用

    2024年02月05日
    浏览(49)
  • React源码解析18(1)------ React.createElement 和 jsx

    我们知道在React17版本之前,我们在项目中是一定需要引入react的。 import React from “react” 即便我们有时候没有使用到React,也需要引入。原因是什么呢? 在React项目中,如果我们使用了模板语法JSX,我们知道它要先经过babel的转译。那babel会将JSX转换成什么样子的格式呢? 可

    2024年02月13日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包