react 如何在不使用“`”符号的情况下允许多行返回？

Question

我很好奇事情是如何运作的。我最近提出的问题之一是 React 如何允许没有 ` 符号的多行返回？

这是我的JS：

function func(){
   return `
      <elm>something</elm>
   `
}

这是 React 版本的脚本：

function func(){
   return <>
      <elm>something</elm>
   </>
}

我知道他们使用“<>”，但它如何工作的一般概念让我感到好奇。

Answer 1

React Component 的返回不是一个需要引号或反引号（ ` ）的字符串。这是一种特殊的格式，称为 JSX。

JSX 是 JavaScript 的语法扩展，可让您在 JavaScript 文件内编写类似 HTML (XML) 的标记。

历史上，React Elements 曾经是由

React.createElement

函数编写的。问题中的组件：

function Func(){
   return <>
      <elm>something</elm>
   </>
}

写为

import React from "react";

function Func(){
   return React.createElement(
     /* Element or component name */
     React.Fragment, 
     /* props */
     null, 
     /* ...children */
     React.createElement(
       "div", null, "something"
     )
  )
}

为了使编写组件更简单，发明了JSX，使编写元素和组件变得更容易。

目前，浏览器本身并不理解 JSX。因此，编译器需要使用 Babel 或 Webpack 等工具将

<div>something</div>

转译为

React.createElement("div", null, "something")

。如果您使用 Next.js 或 Remix 等框架，或者 Vite 或 create-react-app 等构建工具，该框架将为您处理此步骤。

深度阅读

• https://react.dev/learn/writing-markup-with-jsx
• https://react.dev/reference/react/createElement
• https://legacy.reactjs.org/docs/jsx-in-deep.html
• https://babeljs.io/repl

---