3.React JSX的两种形式

JSX是JavaScript eXtension(JavaScript 的语法扩展)的缩写,JSX 语法上更接近 JavaScript 而不是 HTML,所以 React DOM 使用 camelCase(小驼峰命名)来定义属性的名称,而不使用 HTML 属性名称的命名约定。

React 会将以小写字母开头的组件视为原生 DOM 标签。例如,<div /> 代表 HTML 的 div 标签,而 <Welcome /> 则代表一个组件,并且需在作用域内使用 Welcome

DOM标签形式的JSX

使用 camelCase(小驼峰命名)来定义属性的名称,属性值应该仅使用引号(对于字符串值)或大括号(对于表达式)中的一个。

//属性值为字符串值
const element = <div tabIndex="0"></div>;
//属性值为表达式
const element = <img src={user.avatarUrl}></img>;
//单行形式
const element = <h1>Hello, {name}</h1>;
//多行需添加圆括号
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

组件形式的JSX

const element = <Welcome name="Sara" />;

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/javascript/react/9707.html

(0)
上一篇 2021年11月2日 21:58
下一篇 2021年11月3日 02:09

相关推荐

  • 1.使用React的两种方式

    1.直接添加到网站的方式 index.html like_button.js 压缩 like_button.js 代码 确保计算机已安装Node.js,然后在项目文件夹下运行如下命令: 安装 JSX 预处理器(Babel) 以下这两段代码是等价的。 若想支持JSX,需要安装 JSX 预处理器(Babel)。确保计算机已…

    React教程 2021年11月1日
    05170
  • 7.React事件的介绍

    事件处理 React 事件的命名采用小驼峰式(camelCase),而不是纯小写。 例如,下面的 Toggle 组件会渲染一个让用户切换开关状态的按钮: 向事件函数传递参数

    React教程 2021年11月7日
    03130
  • 4.React元素(JS 对象)的介绍

    这个对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象,然后使用它们来构建 DOM 以及保持随时更新。

    React教程 2021年11月4日
    03310

发表回复

登录后才能评论