Question

我试图使用React库我正在使用并将其移动到自己的NPM模块。我可以导入组件并使用webpack构建它，但是当我使用它时，我收到此错误：

＆＃34;未捕获错误：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object。您可能忘记从其定义的文件中导出组件，或者您可能混淆了默认和命名导入。＆＃34;

导入的模块如下所示：

val source = Slick.source(TableQuery[Items].result)

你可以在https://github.com/samguyjones/mobinge/blob/master/src/mobinge.js

看到整件事

导入代码如下所示：

import React from 'react';
import PanelSet from './panelset';
import MediaQuery from 'react-responsive';

class Mobinge extends React.Component {
  constructor(props) {
    const ratio=.75;
    const width = parseInt(props.width);
    const startPanel = parseInt(props.startPanel);
    super(props);
    this.state = {
      width: width,
      height: width/ratio,
      startPanel: startPanel - 1,
      manifest: props.manifest
    };
  }

在Mobinge结束时，我用

导出它

import ReactDOM from 'react-dom';
import React from 'react';
import Mobinge from 'mobinge';
import {
  HashRouter as Router,
  Route,
  Link
} from 'react-router-dom'


const Reader = ({match}) => {
  const panelNo = (match.params.panelNo) ? match.params.panelNo : 1;
  return <div>
      <Mobinge width="320" maxPanel="4" arrowThreshold="2" startPanel=        {panelNo}
      manifest="manifest.json"/>
    </div>;
}

window.addEventListener('DOMContentLoaded', () => {
  const mobinge = <Router>
    <div>
      <Route path="/panel/:panelNo" component={Reader}/>
      <Route exact path="/" component={Reader}/>
    </div>
  </Router>;
  ReactDOM.render(
    mobinge,
    document.getElementById('root')
  );
});

最初，我是用

开始的

export default Mobinge;

遇到同样的问题。

导入对我来说很好看。如果我在Reader中放置一个断点，它告诉我Mobinge是一个空的JS对象。我做错了什么？

为什么我的新NPM React组件得到＆＃34;元素类型无效＆＃34;错误？

0 个答案: