在没有 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，因为我真的不明白它是如何工作的。

为此，您必须查看为该语言定义的标准。 You can start here。今天的大多数浏览器都支持 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