在沒有 ES6 的 React 中導出和導入類

Question

我正在做一個 react 項目，但不想使用ES6 ，因為我真的不明白它是如何工作的。 我想導出我的類 ShoppingList，如下所示：

class ShoppingList extends React.Component {
    render() {
        return (
            <div className="shopping-list">
                <h1>Shopping List for {this.props.name}</h1>
                <ul>
                    <li>Instagram</li>
                    <li>WhatsApp</li>
                    <li>Oculus</li>
                </ul>
            </div>
        );
    }
}

我想將它導入到我的 index.js 中：

const rootElement = document.getElementById('root')
const ShoppingList = require('./Components/ShoppingList')

function App() {
    return (
        <div>
            <ShoppingList name="Abhinav" />
        </div>
    )
}

ReactDOM.render(<App />, rootElement)

但是require()函數不起作用。 如果有人能告訴我如何輕松導入 ta 函數或如何將 ES6 添加到其中。 該目錄的圖像如下：

Answer 1

不想使用 ES6，因為我真的不明白它是如何工作的。

為此，您必須查看為語言定義的標准。 你可以從這里開始。 今天的大多數瀏覽器都支持 ES6+ 特性，如類、粗箭頭語法、let、const 等。

要獲得全面支持，您必須設置任何用於將最新標准代碼轉換為工作支持代碼的轉譯器。 這意味着它將代碼轉換為不理解最新語法的瀏覽器支持的代碼。

為此，您可以使用多種工具，例如：

• 網絡包
• 通天塔
• 打字稿

等等。Typescript 是一種語言，它是 javascript 的超集。 它具有尚未發布或支持的 javascript 的所有最新功能。

如果有人能告訴我如何輕松導入函數或如何將 ES6 添加到其中。

看，如果你想導入任何函數或類，那么它必須先導出。 因此，如果我們采用您的代碼示例，那么您必須將其導出為：

export class ShoppingList extends React.Component {
     // class code
}

或者

class ShoppingList extends React.Component {}
export { ShoppingList }; // normal export
export default ShoppingList; // default export don't need {}

在上面的代碼中，您可以看到兩種類型的導出，第一種是內聯導出，您也可以默認導出它，例如export default class ShoppingList ... 。

在第二個示例中，您可以看到兩種類型的導出：

• 正常的出口將在出口{}和進口在{}過。
• 默認導出將不帶大括號導出，也將不帶大括號導入。

現在你可以像這樣導入它：

import { ShoppingList } from './path/of/file'; // normal import
import ShoppingList from './path/of/file'; // default exported import    
import SList from './path/of/file'; // name it anything but works only for default exports