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

将 if 语句写在 JSX 代码之外

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