Question

对于引擎盖下的React import语句发生了什么，我感到困惑。

我看过一个经典的例子，它是从ReactRouterDOM导入东西的，像这样：

import { BrowserRouter } from "react-router-dom";

Here is a working example I found on Codesandbox

但是，这里有些事情发生了，因为我不知道如何创建使用此语法的简单html文件和脚本。如果您想使用该语法，似乎您被迫以某种方式使用“创建反应”脚本。同时，如果我将语法切换为：

const {
  BrowserRouter,
  Route,
  Link
} = ReactRouterDOM;

然后，我可以创建一个非常简单的static html file which uses the react router DOM。

有人可以解释这些语法的区别吗？每个人似乎都使用第一个版本，但是第二个版本对我来说似乎更直观。

Answer 1

...我不知道如何创建使用此语法的简单html文件和脚本...

您不能使用完全语法，因为当前网络上不支持该模块说明符。大概是因为涉及到捆绑器，所以它可以在React项目中工作。

要在网络上使用本机模块支持：

使用type="module" script标签添加入口点脚本。
在该入口点使用import语句引用其他脚本：
- 在同一位置：from "./mod.js" —请注意，./是必需的。
- 在当前位置的父位置：from ../mod.js
- 在yoru域的根：from "/mod.js"
目前，浏览器中的模块说明符必须以./，../或/开头。

这是一个简单的示例，无需捆绑程序即可在现代浏览器（Chrome，Firefox，Safari，Edge）上运行：

HTML：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Module Example</title>
</head>
<body>
<script src="main.js" type="module"></script>
</body>
</html>

main.js：

import { example } from "./mod.js";

example();

mod.js：

export function example() {
    console.log("Hello, modules!");
}

加载HTML页面时，它将加载main.js，而该页面又将加载mod.js。

在该示例中，example是mod.js的命名导出，这就是为什么要使用{ example }导入它的原因。

模块也可以（或改为）具有默认导出：

export default function() {
    console.log("Hello, modules!");
}

您导入的默认值不带{}：

import example from "./mod.js";

Answer 2

您需要了解javascript标准及其支持之间的区别。

您试图实现的目标称为破坏： Object Rest / Spread Properties

这是ES2018（ES9）的功能。为了使用语法，您需要将代码转换为标准js（或由引擎支持）

我认为默认情况下，react-scripts在其项目配置中执行此操作。因此，您也可以这样做。仅仅需要学习将webpack与babel一起使用。

反应导入语句

2 个答案: