創建反應組件的npm模塊時出錯

Question

我正在嘗試爲所有可重用反應組件創建節點模塊。我在導入jsx文件時被卡住了。 我有一個基本的jsx模塊，即組件文件夾中的greeting.jsx。

//greeting.jsx 
import React from 'react'; 
export default class Greeting extends React.Component { 
    render() { 
     return (
      <p>Hello World</p> 
     ) 
    } 
} 

文件夾結構： -

- index.js 
- components 
    ¦-- Greeting 
     ¦-- greeting.jsx 
    ¦-- <Other Modules like Greeting> 

index.js其中進口的所有組件和它們導出

//index.js 

import Greeting from './components/Greeting/greeting.jsx'; 

export default { 
    Greeting 
}; 

當我必須使用的問候語模塊我必須導入模塊。就像下面的代碼一樣。但是，這樣做使我的錯誤頁面上

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import GreetingModule from './index.js'; 

ReactDOM.render(<GreetingModule />, document.getElementById('content')); 

錯誤： -

warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). 
invariant.js:39 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 

這就是我現在卡住。雖然如果我直接導​​入jsx文件（如下圖），那麼它的工作原理。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import GreetingModule from './components/Greeting/greeting.jsx'; 

ReactDOM.render(<GreetingModule />, document.getElementById('content')); 

但是，這不是我想要做的，因爲我想創建一個新公共管理模塊的方式和我的index.js應該導出所有的反應成分。

我曾嘗試使用Google創建npm模塊進行反應組件，但找不到任何東西。請幫助解決問題

Answer 1

問題是您正在隔離模塊上運行babel轉換。

我敢打賭，你index.js改造後看起來像：

var Greeting = require('./components/Greeting/greeting.jsx'); 

exports.default = { 
    Greeting 
}; 

而這就是問題。您的模塊正在根據default屬性導出所有肉類。因此，使用你的模塊一個人需要如下使用它：

var Greeting = require('greeting').default; 

您既可以住這一點，或使用你的index.js輸出模塊的老辦法。所以，你變化只有你index.js這樣：

//index.js 

import Greeting from './components/Greeting/greeting.jsx'; 

module.exports = { 
    Greeting 
}; 

這應該做的伎倆。