2.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/frond/react/9707.html

发表评论

登录后才能评论