外部反應組件看不到React.Component

當我鏈接爲npm包時，外部React組件說Uncaught TypeError: Cannot read property 'Component' of undefined。外部反應組件看不到React.Component

我鏈接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正如我所想的那樣，這個版本不包括反應包，假設這將在鏈接它的項目上。但是組件仍然沒有看到反應對象。

UPD

我加入import React from 'react';作爲@aulizko建議的，但是這僅提供陣營對象到頁面上。它仍然不可見的組件。

爲了解決這個問題，我不得不提供這個更改https://github.com/varya/react-mapbox/commit/2687d66025aaa84553a79850aa8686e88f1f39d9 我還需要react在組件的代碼中。我必須與巴別一起建造。出於某種原因，即使需要react，webpack版本也會提供相同的錯誤。我創建了一個分支來說明這個問題https://github.com/varya/react-mapbox/tree/webpack現在我對Babel很滿意，但是如果感興趣的話，可以看看webpack有什麼問題。

來源

2015-10-15 Varvara Stepanova

問題是，您在編輯器中看到的jsx代碼不是由節點或瀏覽器執行的代碼。

如果你看看由通天生成的代碼，你會看到這樣的事情：

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

所以，你可以看到它使用React不斷引擎蓋下。

如果您想使用jsx-code，則需要明確導入React。

添加這樣的事情在你的代碼，它會工作：

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

import {render} from 'react-dom'; 

import MapBox from "react-mapbox"; 

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

來源

2015-10-15 13:52:06 aulizko

嗨。感謝你的回答。這沒有幫助。我以不同的方式解決，我會在下面寫一個答案。 –

我加入import React from 'react';作爲@aulizko建議，但這僅供陣營對象到頁面上。它仍然不可見的組件。

來源

2015-10-15 14:57:41

你必須輸入做出反應的Component這樣說：

import {Component} from 'react';

甚至：

import React, { Component, PropTypes } from 'react';

來源

2015-10-19 20:47:06

你可能捆綁你的模塊作爲UMD這是造成捆利用全球React消費者應用中不存在的變量。您需要使用https://webpack.github.io/docs/configuration.html#output-librarytarget作爲CommonJS或AMD模塊導出包。簡單地將libraryTarget: 'commonjs2或libraryTarget: 'amd'添加到webpack config中的output密鑰中，並確保您在組件中導入react。

來源

2016-02-19 21:23:24 slightlytyler

外部反應組件看不到React.Component

回答

相關問題