码迷,mamicode.com
首页 > Web开发 > 详细

JSX 语法

时间:2018-01-31 00:59:13      阅读:1059      评论:0      收藏:0      [点我收藏+]

标签:data-   render   大括号   section   index   需要   blog   repeat   cti   

jsx 不能直接运行,是被 babel-loader 中的 react 这个 preset 翻译的

需要注意:

1.必须被一个单独的大标签包裹,比如:div 或者 section

2.标签必须封闭

3.class 要写成 className, for 要写成 htmlFor

4.HTML 注释不能使用,只能使用 JS 注释

5.原生标签,比如:p、li、div 如果要使用自定义属性,必须用 data- 前缀。

<p data-a="10"></p>

如果是自定义标签,此时可以随便传属性:

<App a="10"></App>

6.JS 表达式用 { } 单大括号包裹。

在 JSX 中不能使用 if...else... 语句,但可以使用 conditional (三元运算) 表达式来替代。

7.可以运行函数

8.样式使用双大括号

9.可以使用数组,数组中如果是 JSX 语法,数组会被自动展开,所以不需要使用 ng-repeat 或 v-for 这样的指令展开数组。

class List extends Component {
  // 组件中最重要的方法就是render方法,render是渲染的意思
  render() {
      /**
       * 定义一个数组
       * map 映射成一个数组
       * 定义的JSX项目上要求有key属性,只要是重复的数组项目,都要有不能重复的key属性,这是要求。
       */
      let arr = ["白板","幺鸡","二条"].map((item,index)=>{
      return <li key={index}>{item}</li>
      });
      // 返回一个jsx语法,非常牛逼语法
      return <ul>{arr}</ul>
  }
} 

效果图:

技术分享图片

10.小写字母开头为原生标签,大写字母开头为React组件。

JSX 语法

标签:data-   render   大括号   section   index   需要   blog   repeat   cti   

原文地址:https://www.cnblogs.com/crazycode2/p/8387579.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!