3.React JSX的两种形式

huoxiaoqiang • 2021年11月3日 01:31 • React教程 • 阅读 325

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>
);

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

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