代码之家 › 专栏 › 技术社区 › bremen_matt

React导入语句

reactjs node.js javascript

0

bremen_matt · 技术社区 · 6 年前

我搞不清楚这是怎么回事 import

我看到的一个典型例子是从 ReactRouterDOM 这样地:

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

Here is a working example I found on Codesandbox

然而,这里有一些秘密,因为我不知道如何创建一个使用这种语法的简单html文件和脚本。如果您想使用“create-react”脚本,那么您似乎不得不使用该语法。同时,如果我将语法转换为:

const {
  BrowserRouter,
  Route,
  Link
} = ReactRouterDOM;

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

有人能解释一下这些语法的区别吗?每个人似乎都在使用第一个版本,但第二个版本对我来说似乎更直观。

2 回复 | 直到 6 年前

1

T.J. Crowder 6 年前

你不能,用 确切地 这种语法,因为该模块说明符目前在web上不受支持。它在React项目中工作可能是因为涉及到绑定器。

要在web上使用本机模块支持:

使用 type="module" script 标签。
使用 import
- 来自同一地点: from "./mod.js" -请注意 ./ 是必需的。
- 在当前位置的父级中: from ../mod.js
- 在yoru域的根: from "/mod.js"
目前,浏览器中的模块说明符必须从 , ../ ,或 / .

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页面时,它将加载 主要.js ,它将依次加载 国防部js .

example 是一个属于 { example } .

模块还可以(或者相反)具有 默认导出

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

导入默认值时不使用 {} :

import example from "./mod.js";

2

1

Bogdan M. 6 年前

你想要达到的目的叫做破坏: Object Rest / Spread Properties

这是ES2018(ES9)的一个特点。为了使用语法,您需要将代码传输到标准js(或引擎支持的js)