反應導入語句
[英]React import statements
問題描述
我對引擎蓋下的React import語句到底發生了什么感到困惑。
我見過一個經典的例子，從ReactRouterDOM導入東西是這樣的：
import { BrowserRouter } from "react-router-dom";
但是，這里發生了一些事情，因為我不知道如何創建使用此語法的簡單html文件和腳本。 如果您想使用該語法，似乎您被迫以某種方式使用“創建反應”腳本。 同時，如果我將語法切換為：
const {
BrowserRouter,
Route,
Link
} = ReactRouterDOM;
然后，我可以創建一個使用React Router DOM的非常簡單的靜態html文件 。
有人可以解釋這些語法的區別嗎？ 每個人似乎都使用第一個版本，但是第二個版本對我來說似乎更直觀。
2 個解決方案
解決方案1
1 已采納 2018-11-07 14:11:18
...我不知道如何創建使用此語法的簡單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";
解決方案2
1 2018-11-07 14:20:56
您需要了解javascript標准及其支持之間的區別。
您嘗試實現的目標稱為銷毀： 對象剩余/擴展屬性
這是ES2018（ES9）的功能。 為了使用語法，您需要將代碼轉換為標准js（或由引擎支持）
我認為默認情況下，react-scripts在其項目配置中執行此操作。 因此，您也可以這樣做。 僅需要學習將webpack與babel一起使用。
如何在 React Native 的 Firebase 版本 9 中調用或使用 import 語句？
[英]How do you call or use import statements in Firebase Version 9 in React Native?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.