Question

我正在使用React创建一个简单的Web配置文件，并尝试将Navbar类分离到单独的文件中。

我想要：

navbar.js

WHERE

伴随：

index.js

//Navbar Component
class Navbar extends React.Component {

  render() {
    const home = React.createElement('button', {className: 'button1'}, 'Home');
    const contact = React.createElement('button', {className: 'button2'}, 'Contact');

    return React.createElement('div', null, home, contact);
  }
}

export default Navbar;

但是我得到了错误：

import Navbar from './navbar.js'

// Creates and renders all individual components
class App extends React.Component {
  render() {
    return React.createElement(Navbar, null, null);
  }
}

// Finalize - Render App which then renders all components
ReactDOM.render(
  React.createElement(App, null, null),
  document.getElementById('root')
);

似乎只有在以下两个文件中声明了两个类时，它才起作用：

Uncaught SyntaxError: Cannot use import statement outside a module

有关导入此组件的任何提示吗？

Answer 1

我相信您要做的就是将属性type="module"添加到<script>文件中的index.html标签中，如下所示：

<script src="path/to/your/index.js" type="module"></script>

然后，浏览器会将您的内联index.js代码解释为ECMAScript模块，并且您的import语句应该可以使用。可以在here中找到更多信息（只需搜索type =“ module”）。

不带Webpack导入React组件

1 个答案: