React JSX

什么是 JSX?

JSX 代表 JavaScript XML。

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

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

JSX 编码

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

JSX 将 HTML 标记转换为 react 元素。

您不需要使用 JSX，但 JSX 使编写 React 应用程序变得更容易。

这里有两个例子。第一个使用 JSX，第二个不使用:

实例 1

JSX:

import React from 'react';
import ReactDOM from 'react-dom';
const myelement = <h1>I Love JSX!</h1>;
ReactDOM.render(myelement, document.getElementById('root'));

实例 2

不是使用 JSX:

import React from 'react';
import ReactDOM from 'react-dom';
const myelement = React.createElement('h1', {}, 'I do not use JSX!');
ReactDOM.render(myelement, document.getElementById('root'));

正如您在第一个示例中看到的，JSX 允许我们直接在 JavaScript 代码中编写 HTML。

JSX 是基于 ES6 的 JavaScript 语言的扩展，并在运行时转换为常规 JavaScript。

JSX中的表达式

使用 JSX，您可以在大括号内编写表达式 { }。

表达式可以是 React 变量、属性或任何其他有效的 JavaScript 表达式。JSX 将执行表达式并返回结果:

实例

执行表达式 5 + 5:

import React from 'react';
import ReactDOM from 'react-dom';
const myelement = <h1>React is {5 + 5} times better with JSX</h1>;
ReactDOM.render(myelement, document.getElementById('root'));

插入 HTML

要在多行上编写 HTML，请将 HTML 放在括号内:

实例

创建一个包含三个列表项的列表:

import React from 'react';
import ReactDOM from 'react-dom';
const myelement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);
ReactDOM.render(myelement, document.getElementById('root'));

一个顶级元素

HTML 代码必须包在一个顶级元素中。

因此，如果你想写两个段落，你必须把它们放在一个父元素中，比如 div 元素。

实例

将两个段落包在一个 DIV 元素中:

import React from 'react';
import ReactDOM from 'react-dom';
const myelement = (
  <div>
    <h1>I am a Header.</h1>
    <h1>I am a Header too.</h1>
  </div>
);
ReactDOM.render(myelement, document.getElementById('root'));

如果 HTML 不正确，或者 HTML 缺少父元素，JSX 将抛出错误。

或者，您可以使用 "片段" 来包装多行。这将防止不必要地向 DOM 添加额外节点。

片段看起来像一个空的 HTML 标记：<></>。

实例

将两个段落包装在一个片段中:

import React from 'react';
import ReactDOM from 'react-dom';
const myelement = (
    <>
      <p>I am a paragraph.</p>
      <p>I am a paragraph too.</p>
    </>
  );
ReactDOM.render(myelement, document.getElementById('root'));

元素必须关闭

JSX 遵循 XML 规则，因此 HTML 元素必须正确关闭。

实例

用 /> 关闭空元素

import React from 'react';
import ReactDOM from 'react-dom';
const myelement = <input type="text" />;
ReactDOM.render(myelement, document.getElementById('root'));

如果 HTML 没有正确关闭，JSX 将抛出一个错误。

className 属性

class 属性是 HTML 中经常使用的属性，但由于 JSX 呈现为 JavaScript，并且 class 关键字是 JavaScript 中的保留字，因此不允许在 JSX 中使用它。

使用 className 替代。

JSX solved this by using className instead. When JSX is rendered, it translates className attributes into class attributes.

JSX 通过使用 className 解决了这个问题。当呈现 JSX 时，它将类名属性转换为类属性。

实例

在 JSX 中使用 className 代替 class :

import React from 'react';
import ReactDOM from 'react-dom';
import './mystyle.css';
const myelement = <h2 className="myclass">Hello World</h2>;
ReactDOM.render(myelement, document.getElementById('root'));

if 语句

React 支持 if 语句，但 JSX 内不支持。

为了能够在 JSX 中使用条件语句，应该将 if 语句放在 JSX 之外，或者可以使用三元表达式：

方法1，在 JSX 代码之外编写 if 语句：

实例

如果 x 小于 10，输出 "Hello”，否则输出 "Goodbye"：

import React from 'react';
import ReactDOM from 'react-dom';
const x = 5;
let text = "Goodbye";
if (x < 10) {
  text = "Hello";
}
const myelement = <h2>{text}</h2>;
ReactDOM.render(myelement, document.getElementById('root'));

方法二，改用三元表达式:

实例