JSX 语法

Posted 2020-10-22 每天都要进步一点点

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组件。