javascript - 为什么即使我没有明确使用 React,我也需要 import React 语句?
问题描述
我有一个 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'
,它将显示如下错误消息。
未捕获的 ReferenceError:未定义 React
但是我没有在任何地方明确地在我的代码中使用 React,为什么它会显示这样的消息。谁能告诉我引擎盖下发生了什么?
更新:与这个 问题不完全相同,因为我的代码中的只是一个单独的组件,不涉及任何父组件。
解决方案
使用 JSX( <App />
) 只是React.createElement()
.
因此,当您的代码转换为纯 javascript 时,对的引用React
将出现在那里,因此您需要为此导入。
所以是的,你正在使用它,虽然你没有看到它
在此处查看您的代码转换为什么
'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'));
推荐阅读
- spring - Spring Reactive 事件和事务上下文
- macos - NSTextview 不会显示韩文文本替换的弹出菜单
- c++ - 在类中初始化常量
- angular - angular/nodesjstools: How to say nodesjstools of vs2017 to use other nodes_module to install a package?
- php - 为什么如果“allParticipants == 0”并且有自定义问题出现的消息不正确?
- html - 滑块动画
- c# - Comparing values stored in two arrays c#
- php - working with DateTime object received from doctrine
- asp.net - 我的程序架构有意义吗?AngularJS + ASP.NET Web API + SQL Server
- c++ - SDL 从一个类渲染矩形