将react组件发布到npm并重用它

Question

我试图将一个基本的React组件发布到我的npm注册表并尝试重用它.我想我没有按照正确的方式分发我的反应组件.这就是我所拥有的:

这是目录结构:

MyReactPOC
    -> main.jsx
    -> .npmrc
    -> package.json
    -> webpack.config.js

main.jsx

import React from 'react';

class MyComponent extends React.Component {
    render() {
        return (
            <div>
                <p>Hello from MyComponent!!</p>
            </div>
        );
    }
}

export default MyComponent

的package.json

{
  "name": "@pankaj/my-component",
  "version": "1.0.7",
  "description": "POC for importing a component",
  "main": "./dist/bundle.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prepublish": "webpack --config webpack.config.js"
  },
  "repository": {
    "type": "git",
    "url": "my git repo"
  },
  "author": "Pankaj",
  "license": "ISC",
  "dependencies": {
    "react": "~15.5.4",
    "react-dom": "~15.5.4"
  },
  "devDependencies": {
    "babel-cli": "~6.24.1",
    "babel-core": "~6.24.1",
    "babel-loader": "~6.4.1",
    "babel-preset-es2015": "~6.24.1",
    "babel-preset-react": "~6.24.1",
    "webpack": "~2.4.1"
  }
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './main.jsx',
    output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js' },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
};

我用另一个项目导入模块import MyComponent from '@pankaj/my-component'.

当我使用这个组件时

我收到以下错误:

React.createElement:type无效 - 期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:object.您可能忘记从其定义的文件中导出组件.

请帮助我了解分发反应组件的正确方法,以便我们组织内的其他项目可以使用它们.

以下是我使用此组件的方法:

ComponentUse.js

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from '@pankaj/my-component';

ReactDOM.render(
  <MyComponent/>,
  document.getElementById('root')
);

我有一个index.html,它有'root'div.

Answer 1

每个 React 组件都需要一个 return 语句。在渲染函数中添加一个 return 语句，它应该可以工作。

...
render() {
     return (<div>...</div>)
}

您不能直接从 React 组件渲染到 Dom，而是返回它以便 React 可以使用它。

在 webpack 中，使用 output.library 将输出文件指定为库https://webpack.js.org/concepts/output/#output-library