React JSX 语法

• 

  什么是 JSX

  JSX 代表 JavaScript XML。

  JSX 允许我们在 React 中编写 HTML。

  JSX 使在 React 中编写和添加 HTML 变得更加容易。

  注意，本教程 React 代码环境围绕 npm 的构建环境进行学习，如不懂可以先阅读 React 环境搭建这章进行了解学习

• 

  编码 JSX

  JSX 允许我们用 JavaScript 编写 HTML 元素并将其放置在 DOM 中，而无需任何 createElement() 和 appendChild() 方法。

  JSX 将 HTML 标记转换为 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'));
  

  运行结果如下：

  

  没有使用JSX 语法 index.js：

  import React from 'react';
  import ReactDOM from 'react-dom';
  const myelement = React.createElement('h1', {}, '我没有使用 JSX 哦!');
  
  ReactDOM.render(myelement, document.getElementById('root'));
  

  运行结果如下：

  

  正如您在第一个示例中看到的那样，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'));
  

  运行结果如下：

  
• 

  插入一大段 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'));
  

  运行结果如下：

  
• 

  一个顶级元素

  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'));
  

  运行结果如下：

  

  如果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'));
  

  运行结果如下：

  

  如果未正确关闭HTML，JSX将引发错误。