JSX 简介 ---JSX 语法注意事项

本贴最后更新于 1625 天前,其中的信息可能已经时移世易
import React from 'react'
import ReactDom from 'react-dom'
const element = <h1>Hello, world!</h1>;

  这种有趣的标签语法既不是字符串也不是 HTML。

  这就是 JSX ,他是 JavaScrip 的一种扩展语法。我们推荐在 React 中使用这种语法来描述 UI 信息。JSX 可能会让你想起某种模板语言,但是它具有 JavaScrip 的全部能力。

  JSX 可以生成 React “元素”。

1. 什么是 JSX 语法:

  就是符合 xml 规范的 JS 语法;(语法格式相对来说,要比 HTML 严谨很多)

2. 如何启用 jsx 语法

  请移步:Webpack4.0 如何启用 jsx 语法

3. jsx 语法的本质:

  并不是直接把 jsx 渲染到页面上,而是 内部先转换成了 createElement 形式,再渲染的

4. 在 jsx 中混合写入 js 表达式

  在 jsx 语法中,要把 JS 代码写到 { }

  什么情况下需要使用 { } 昵?当我仞需要在 Jsx 控制的区域内,写 Js 表込式了,則需要把 Js 代碍写到 { }

  • 渲染数字
let num = 1997;

ReactDom.render(<div>{num + '1009'}</div>, document.getElementById('app'));
  • 渲染字符串
let str = "你好,Smile";

ReactDom.render(<div>{str}</div>, document.getElementById('app'));
  • 渲染布尔值
let bool = true;

ReactDom.render(<div>

   {bool.toString()}
   
   <hr />
   
   {bool?"条件为真":"条件为假"}

</div>, document.getElementById('app'));
  • 为属性绑定值
let title = 'This is a h3';

ReactDom.render(<div>

   <h3 title={title}>独自走在繁华的都市,擦身而过的是熙熙攘攘的人群。路灯拉长孤独的身影,热闹都是旁人的,你总是一个人...</h3>

</div>, document.getElementById('app'));

  • 渲染 jsx 元素
const myH3 = <h3>独自走在繁华的都市,擦身而过的是熙熙攘攘的人群。路灯拉长孤独的身影,热闹都是旁人的,你总是一个人...</h3>;

ReactDom.render(<div>{myH3}</div>, document.getElementById('app'));
  • 渲染 jsx 元素数组
const arr = [
    <h3>斯人若彩虹,遇上方知有</h3>,
    <h3>管他熙熙攘攘阳关道,我偏一条独木桥走到黑</h3>
];

ReactDom.render(<div>{arr}</div>, document.getElementById('app'));
  • 将普通字符串数组,转为 jsx 数组并渲染到页面上【两种方案】

React 中,需要把 key 添加給被 forEach 或 map 或 for 循坏直接控制的元素

// React中,需要把key添加給被forEach或map或for循坏直接控制的元素

const arrStr = ['魏无羡', '蓝忘机', '舅舅', '师姐', '小天使', '夷陵老祖'];
const nameArr = [];
arrStr.forEach(item => {
    const temp = <h4 key={item}>{item}</h4>;
    nameArr.push(temp)
});
ReactDom.render(<div>{nameArr}</div>, document.getElementById('app'));
const arrStr = ['魏无羡', '蓝忘机', '舅舅', '师姐', '小天使', '夷陵老祖'];

ReactDom.render(<div>
	{arrStr.map(item => <div key={item}><h5>{item}</h5></div> )}
</div>, document.getElementById('app'));

在 jsx 中 写注释:推荐使用 { /* 这是注释 */ },eg:

   {/*{arr}*/}
   
   {
       //    这是注释,你看不见我
   }

  5. 为 jsx 中的元素添加 class 类名:需要使用 className 来替代 classhtmlFor 替换 label 的 for 属性

class 和 for 为 js 中的关键字

  6.在 JSX 创建 DOM 的时候,所有的节点,必须有唯一的根元素进行包裹;

  7.在 jsx 语法中,标签必须 成对出现,如果是单标签,则必须自闭和!

当 编译引擎,在编译 JSX 代码的时候,如果遇到了 < 那么就把它当作 HTML 代码去编译,如果遇到了 {} 就把 花括号内部的代码当作 普通 JS 代码去编译;

  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖
  • 总结
    204 引用 • 1748 回帖 • 2 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 445 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...