【问题标题】:Why do I need import React statement even if I don't use React explicitly?为什么即使我没有明确使用 React,我也需要 import React 语句?
【发布时间】:2018-05-27 02:51:31
【问题描述】:

我有一个 React App,下面是 JavaScript 代码

import React from 'react';
import ReactDOM from 'react-dom';

const App = function(){
  return <div>Hi</div>
}

ReactDOM.render(<App />, document.querySelector('.container'));

HTML文件如下。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAq06l5RUVfib62IYRQacLc-KAy0XIWAVs"></script>
  </head>
  <body>
    <div class="container"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

我不明白的问题是,如果我删除import React from 'react',它将显示如下错误消息。

Uncaught ReferenceError: React is not defined

但是我没有在任何地方明确地在我的代码中使用 React,为什么它会显示这样的消息。谁能告诉我引擎盖下发生了什么?

更新:this one 的问题不完全相同,因为我的代码中只是一个单独的组件,不涉及任何父组件。

【问题讨论】:

标签: javascript reactjs


【解决方案1】:

使用 JSX (&lt;App /&gt;) 只是 React.createElement() 的语法糖。

因此,当您的代码被转译为纯 javascript 时,对 React 的引用将出现在那里,因此您需要为此导入。

所以是的,你正在使用它,虽然你没有看到它

看看你的代码是什么转译成here

'use strict';

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var App = function App() {
  return React.createElement(
    'div',
    null,
    'Hi'
  );
};

_reactDom2.default.render(React.createElement(App, null), document.querySelector('.container'));

【讨论】:

  • 这意味着 Babel 在后台为我完成了繁重的工作??
  • 嗯.. 基本上,是的
猜你喜欢
  • 1970-01-01
  • 2018-12-25
  • 2020-02-20
  • 2013-07-04
  • 2011-02-10
  • 1970-01-01
  • 2017-04-24
  • 2016-06-25
  • 2019-04-09
相关资源
最近更新 更多