Javascript reaction如何在不使用符号的情况下允许多行返回

发布于04月29日

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

这是我的JS:

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

这是React的脚本版本:

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

我知道他们使用"/"，但仅仅是它工作原理的总体 idea 就让我感到好奇.

推荐答案

React Components的返回不是需要引号或回勾(')的字符串.这是一种名为JSX的特殊格式.

JSX是JavaScript的语法扩展，允许您在JavaScript文件内编写类似HTML(ML)的标记.

从历史上看，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来让编写元素和组件变得更容易.

目前，浏览器本身并不理解JMX.因此，编译器需要使用Babel或Webpack等工具将<div>something</div>翻译成React.createElement("div", null, "something").如果您使用Next.js或Remix等框架，或者Vite或Deliver-react-app等构建工具，则该框架将为您处理这一步骤.