React.js“未捕獲的引用錯誤：未定義導出”

Question

我正在嘗試將此組件從一個文件導出到另一個文件

export default function Form() {
    return (
        <div>
        <form action="./add_product.php">
        <div style={{display: 'flex', flexDirection: 'row'}}>
        <label htmlFor="Student">SKU </label>
        <input name="Student" />
        </div>
        </form>
        </div>
    )
}

該組件所在的文件名為 add_product.js
我正在嘗試將其導出到名為 fns.js 的文件中
這是我在 fns.js 中嘗試導入組件的代碼

import Form from './add_product';
ReactDOM.render(<Form />, document.getElementById("product_form"));

這兩個文件都在一個目錄中，我在代碼中包含了 react 和 babel 的 CDN 鏈接，但仍然出現“未捕獲的 ReferenceError：未定義導出”之類的錯誤
解決此問題的解決方案是什么？

Answer 1

如果您使用代碼拆分，導入將起作用。

有關於使用 webpack 進行設置的文章，您可以在 Google 上搜索“react webpack setup”。

如果你想使用CDN的方式，我在學習的時候也是這樣做的。 主要是為所有組件添加腳本標簽。

HTML

<html>

<head>
    <title>Test</title>
    <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 crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
    <h2>Testing 1 2 3 ...</h2>
    <div id="product_form"></div>

    <script type="text/babel" src="add_product.js"></script>
    <script type="text/babel" src="fns.js"></script>
</body>

</html>

fns.js

// import Form from './add_product';

ReactDOM.render(<>
    <h3>React CDN</h3>
    <Form />
</>,
    document.getElementById("product_form"));

add_product.js

// export default 

function Form() {
    return (
        <div>
            <form>
                <div style={{ display: 'flex', flexDirection: 'row' }}>
                    <label htmlFor="Student">SKU </label>
                    <input name="Student" />
                </div>
            </form>
        </div>
    )
}

我希望這會有所幫助。

React.js“未捕獲的引用錯誤：未定義導出”

問題描述

1 個解決方案

解決方案1
0 已采納 2022-08-02 08:37:57

React.js“未捕獲的引用錯誤：未定義導出”

問題描述

1 個解決方案

解決方案1 0 已采納 2022-08-02 08:37:57

解決方案1
0 已采納 2022-08-02 08:37:57