[英]How to use import and export functions using reactjs?
我是新學習的 React 庫,這個問題已經兩周了,現在無法解決。 所以當我在一個文件“Index.js”中擁有所有功能時
function Header(){
return(
<header>
<nav className="nav">
<img src="./logo-react.png" width="100px"/>
<ul className="nav-items">
<li>Price</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
)
}
function Maincont(){
return (
<div>
<Header />
</div>
)
}
ReactDOM.render(< Maincont />,document.getElementById("root"))
一切正常沒問題,但是一旦我將函數切換到其他文件“Header.js”並嘗試將其導出導入到“index.js”,它就會停止工作我正在使用帶有 CDN 鏈接的 React,這是我的 HTML 代碼也是
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="index.js" type="text/babel"></script>
我也嘗試將類型更改為 Module 但仍然不可能這是控制台中顯示的內容
index.js:3 Uncaught ReferenceError: require is not defined
at <anonymous>:3:15
at i (babel.min.js:24:29679)
at r (babel.min.js:24:30188)
at e.src.n.<computed>.l.content (babel.min.js:24:30503)
at XMLHttpRequest.n.onreadystatechange (babel.min.js:24:29946)
(anonymous) @ index.js:3
i @ babel.min.js:24
r @ babel.min.js:24
e.src.n.<computed>.l.content @ babel.min.js:24
n.onreadystatechange @ babel.min.js:24
XMLHttpRequest.send (async)
s @ babel.min.js:24
(anonymous) @ babel.min.js:24
o @ babel.min.js:24
u @ babel.min.js:24
f @ babel.min.js:1
(anonymous) @ babel.min.js:1
Babel 沒有 polyfill require
。 您需要:
使用 ES6 模塊,其中你的入口點加載了<script type="module">
然后你使用import
和export
而不是require
和module.exports
。 我相信您還需要對 Babel 進行一些更改,以使其能夠在客戶端處理 ES6 模塊導入。
在將代碼發送到瀏覽器之前,使用 Webpack 或 Parcel 等工具結合 Babel轉譯和捆綁代碼。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.