React JSX 语法

  • 什么是 JSX

    JSX 代表 JavaScript XML。
    JSX 允许我们在 React 中编写 HTML。
    JSX 使在 React 中编写和添加 HTML 变得更加容易。
    注意,本教程 React 代码环境围绕 npm 的构建环境进行学习,如不懂可以先阅读 React 环境搭建这章进行了解学习
  • 编码 JSX

    JSX 允许我们用 JavaScript 编写 HTML 元素并将其放置在 DOM 中,而无需任何 createElement()appendChild() 方法。
    JSXHTML 标记转换为 react 元素。
    您可以不需要使用 JSX,但是 JSX 使编写 React 应用程序变得更加容易。
    让我们通过两个示例进行演示,第一个示例使用 JSX,第二个示例不使用:
    使用JSX 语法 index.js:
    import React from 'react';
    import ReactDOM from 'react-dom';
    const myelement = <h1>I Love JSX!</h1>;
    
    ReactDOM.render(myelement, document.getElementById('root'));
    
    运行结果如下:
    react
    没有使用JSX 语法 index.js:
    import React from 'react';
    import ReactDOM from 'react-dom';
    const myelement = React.createElement('h1', {}, '我没有使用 JSX 哦!');
    
    ReactDOM.render(myelement, document.getElementById('root'));
    
    运行结果如下:
    react
    正如您在第一个示例中看到的那样,JSX 允许我们直接在 JavaScript 代码中编写 HTML。
    JSX 是基于 ES6 的 JavaScript 语言的扩展,并在运行时转换为常规 JavaScript。
  • JSX 中的表达式

    使用 JSX,您可以在花括号 {} 中编写表达式。
    该表达式可以是 React 变量或属性,也可以是任何其他有效的 JavaScript 表达式;JSX 将执行该表达式并返回结果。
    执行表达式5 + 5:
    index.js:
    import React from 'react';
    import ReactDOM from 'react-dom';
    const myelement = <h1>使用JSX,React的效率提高了{5 + 5}倍>/h1>;
    ReactDOM.render(myelement, document.getElementById('root'));
    
    运行结果如下:
    react
  • 插入一大段 HTML

    要在多行上编写 HTML,请将 HTML 放在括号内。
    创建一个包含三个列表项的列表:
    index.js:
    import React from 'react';
    import ReactDOM from 'react-dom';
    const myelement = (
      <ul>
        <li>HTML</li>
        <li>Vue</li>
        <li>React</li>
      </ul>
    );
    
    ReactDOM.render(myelement, document.getElementById('root'));
    
    运行结果如下:
    react
  • 一个顶级元素

    HTML 代码必须包装在一个顶级元素中。
    因此,如果您想编写两个标头,则必须将它们放在父元素(例如div元素)中
    将两个标头包装在一个DIV元素内:
    index.js:
    import React from 'react';
    import ReactDOM from 'react-dom';
    const myelement = (
      <div>
        <h1>我是标题.</h1>
        <h1>我也是标题</h1>
      </div>
    );
    
    ReactDOM.render(myelement, document.getElementById('root'));
    
    运行结果如下:
    react
    如果HTML不正确,或者HTML缺少父元素,则JSX将引发错误。
  • 元素必须关闭

    JSX 遵循 XML 规则,因此必须正确关闭 HTML 元素。
    />关闭空元素:
    index.js:
    import React from 'react';
    import ReactDOM from 'react-dom';
    const myelement = <input type="text" />;
    
    ReactDOM.render(myelement, document.getElementById('root'));
    
    运行结果如下:
    react
    如果未正确关闭HTML,JSX将引发错误。