Question

我正在尝试为我拥有的所有可重用反应组件创建一个节点模块。导入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应该导出所有的反应组件。

我已经尝试使用谷歌搜索为反应组件创建一个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
};

这应该可以解决问题。

创建反应组件的npm模块时出错

1 个答案: