JSX 语法

jsx 是Facebook专门为react发明的一种新的类似于XML格式的语言，它是JavaScipt的语法拓展。它使用XML标记的方式去直接声明界面，然后再利用编译器转换成JS语言。

jsx 的优点：

jsx 在渲染的时候输出的虚拟dom，所以jsx执行更快
类型安全，在编译过程中就能发现错误
使用jsx编写模板更加快速

JSX 基本语法

1. 定义标签时，只允许被一个标签包裹

2. 标签一定要闭合

3. 在HTML中，注释写成 这样的形式，在JSX中依然可以使用这个方法使用注释，但要注意的是，在一个组件的子元素位置使用注释要用 {} 包起来

        {/* 注释 */}

        {
          //单行注释
        }

4. DOM 元素的属性是标准规范属性，但有两个例外——class 和 for，这是因为在 JavaScript 中这两个单词都是关键字。因此，我们要将class属性改为className，for 属性改为HTMLFor。

5. 如果在输入框中输入HTML标签，不想被转义，可以这样做：

import React,{Component} from 'react';

class App extends Component {
  render(){
    let content = "<h1>内容</h1>"
    return (
      <div dangerouslySetInnerHTML={{__html: content}}></div>
    );
  }
}
export default App;

6. JSX 中使用JavaScript表达式，表达式写在花括号 {} 中

7.JSX 绑定属性值

8. JSX 绑定style属性

9. JSX占位符：在JSX中返回的内容都必须包含在一个大的标签内，所以我们必须在最外边套一层div，如果我们不希望页面渲染这层div的话就要使用占位符Fragment

import React,{Component, Fragment} from 'react';

class App extends Component {
  render(){
    return (
      // jsx 占位符
      <Fragment>
        {/* JSX绑定style属性 */}
        <div style={{color:'red', margin:'0 auto'}}></div>
        {/* JSX绑定属性值 */}
        <img src={imgUrl}></img>  
      </Fragment>
    );
  }
}
export default App;

注意：

使用JSX一定要引入react
组件的首字母一定要大写

JSX 基本语法

猜你喜欢