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

或者，您可以使用 "fragment" 来换行。这将防止向 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" />;

属性类=类名

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

JSX 通过使用解决了这个问题className反而。当 JSX 被渲染时，它会翻译className属性转化为class属性。

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

条件 - if 语句

React支持if声明，但不是里面JSX。

为了能够在 JSX 中使用条件语句，您应该将ifJSX 之外的语句，或者您可以使用三元表达式来代替：

选项1：

写ifJSX 代码之外的语句：

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

const paragraph = React.createElement(, {}, 'This is a paragraph without using JSX!');

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