React JSX

什么是 JSX？

JSX 代表 JavaScript XML。

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

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

编写 JSX 代码

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

JSX 将 HTML 标签转换为 React 元素。

以下有两个示例。第一个使用 JSX，第二个不使用。

const myElement = <h1>I Love JSX!</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

如你在第一个示例中所见，JSX 允许我们在 JavaScript 代码中直接编写 HTML。

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

JSX 中的表达式

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

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

const myElement = <h1>React is {5 + 5} times better with JSX</h1>;

插入大块 HTML 代码

要在多行上编写 HTML，请将 HTML 放入括号中。

const myElement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

一个顶级元素

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

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

const myElement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

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

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

const myElement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

元素必须关闭

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

const myElement = <input type="text" />;

属性 class = className

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

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

const myElement = <h1 className="myclass">Hello World</h1>;

条件 - if 语句

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

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

选项 1

在 JSX 代码之外编写 if 语句

const x = 5;
let text = "Goodbye";
if (x < 10) {
  text = "Hello";
}

const myElement = <h1>{text}</h1>;

选项 2

使用三元表达式代替

const x = 5;

const myElement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;