外部React组件无法看到React.Component

Question

Uncaught TypeError: Cannot read property 'Component' of undefined当我链接为npm包时，外部React组件会说。

我将软件包链接package.json为"react-mapbox": "https://github.com/varya/react-mapbox.git"。然后我在代码中使用它

import {render} from 'react-dom';

import MapBox from "react-mapbox";

render(
  <div>
    <h1>Hello, world!</h1>
    <MapBox />
  </div>
  ,
  document.getElementById('example')
);

但是没有任何效果，我得到了那个错误。完整的仓库在这里https://github.com/varya/react-mapbox-test我做了一个小例子来说明。

该react-mapbox程序包是我自己的，也许我编译错误？这是它的 仓库https://github.com/varya/react-mapbox我使用webpack构建的，就像我一样https://github.com/varya/react-mapbox/blob/master/webpack.config.js假设此构建不包括react软件包，前提是这将在链接它的项目中进行。但是组件仍然看不到反应对象。

UPD

我import React from 'react';按照@aulizko的建议添加，但这仅将React对象提供到页面上。该组件仍然不可见。

为了解决这个问题，我还必须提供此更改https://github.com/varya/react-mapbox/commit/2687d66025aaa84553a79850aa8686e88f1f39d9 我react也在组件代码中要求。我必须与Babel建立合作关系。由于某些原因，即使react需要，webpack生成也会给出相同的错误。我创建了一个分支来说明这个问题https://github.com/varya/react-mapbox/tree/webpack现在我对Babel感到满意，但是通过这个分支，如果感兴趣的话，您可以了解webpack的问题。

Answer 1

问题是，您在编辑器中看到的 jsx 代码并不是将由节点或浏览器执行的代码。

如果你查看 babel 生成的代码，你会看到类似这样的内容：

(0, _reactDom.render)(React.createElement(
  'div',
  null,
  React.createElement(
    'h1',
    null,
    'Hello, world!'
  ),
  React.createElement(_reactMapbox2['default'], null)
), document.getElementById('example'));

正如你所看到的，它React在底层使用了常量。

React如果你想使用 jsx-code，你需要显式导入。

在您的代码中添加类似这样的内容，它就会起作用：

import React from 'react'; // <!--- add this!!!

import {render} from 'react-dom';

import MapBox from "react-mapbox";

// the rest of your code goes here...