我正在尝试为我拥有的所有可重复使用的React组件创建一个节点模块。导入jsx文件时卡住了。我有一个基本的jsx模块，即components文件夹中的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') );
但这不是我要创建的npm模块的方式，我的index.js应该导出所有react组件。
我曾尝试使用Google搜索来为反应组件创建一个npm模块，但找不到任何东西。请帮助，解决问题
问题是您正在隔离地在模块上运行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
};
这应该够了吧。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句