在没有 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