ReactJs 组件渲染失败

Question

我是 reactJS 的新手，我正在尝试使用 bigcalendar basic Library here

进入我的一个组件，不幸的是它抛出了一些错误：

invariant.js?4599:42 未捕获错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件。检查Scheduler 的渲染方法。 在不变量（eval at (bundle.js:119), :42:15） 在 ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (eval at (bundle.js:791), :72:55) 在 ReactCompositeComponentWrapper.performInitialMount (eval at (bundle.js:797), :364:22) 在 ReactCompositeComponentWrapper.mountComponent (eval at (bundle.js:797), :255:21) 在 Object.mountComponent (eval at (bundle.js:431), :43:35) 在 ReactDOMComponent.mountChildren (eval at (bundle.js:767), :234:44) 在 ReactDOMComponent._createInitialChildren （评估在 (bundle.js:635), :701:32） 在 ReactDOMComponent.mountComponent (eval at (bundle.js:635), :520:12) 在 Object.mountComponent (eval at (bundle.js:431), :43:35) 在 ReactDOMComponent.mountChildren (eval at (bundle.js:767), :234:44)

我的调度器组件：Scheduler.js

var React = require("react");
var {BigCalendar} = require("react-big-calendar");

class Scheduler extends React.Component  {
  constructor() {
    super();

  }
  render() {
    return (
     <BigCalendar
      // events={events}
      views={['month', 'week', 'day']}
      step={60}
      showMultiDayTimes
      //max={dates.add(dates.endOf(new Date(2015, 17, 1), 'day'), -1, 'hours')}
      popup
      selectable
      onSelectEvent={event => alert(event.title)}
      defaultDate={new Date(2015, 3, 1)}
      // localizer={localizer}
      />
    );
  }
}

module.exports = Scheduler;

和routes.js

var React = require("react");
var router = require("react-router");

var Route = router.Route;
var Router = router.Router;

var browserHistory = router.browserHistory;
var IndexRoute = router.IndexRoute;

// landing components
var Main = require("../components/Main");
var Login = require("../components/children/Login");
var Register = require("../components/children/Register");
// manager components
var Manager = require("../components/Manager");
var ManagerHome = require("../components/children/ManagerHome");
var ManagerEmployeeAll = require("../components/children/ManagerEmployeeAll");
var ManagerSchedulesCreate = require("../components/children/ManagerSchedulesCreate");
var UiTabs = require("../components/children/UiTabs");
var Lorem = require("../components/children/Lorem");
var Scheduler = require("../components/children/Scheduler");

// employee components
var Employee = require("../components/Employee");
var EmployeeHome = require("../components/children/EmployeeHome");

module.exports = (
  <Router history={browserHistory}>
    <Route path="/" component={Main}>
        <Route path="login" component={Login} />
        <Route path="register" component={Register} />
        <IndexRoute component={Login} />
        <Route path="manager" component={Manager}>
            <Route path="employeeAll" component={ManagerEmployeeAll} />
            <Route path="schedulesCreate" component={ManagerSchedulesCreate} />
            <Route path="uiTabs" component={UiTabs} />
            <Route path="lorem" component={Lorem} />
            <Route path="scheduler" component={Scheduler} />
            <IndexRoute component={ManagerHome} />
        </Route>
        <Route path="employee" component={Employee}>
            <IndexRoute component={EmployeeHome} />
        </Route>
    </Route>
  </Router>
);

package.json

{
  "name": "react-shift-scheduler",
  "version": "1.0.0",
  "description": "Employee management system",
  "main": "server.js",
  "scripts": {
    "build": "webpack",
    "start": "node server"
  },
  "repository": {
    "type": "git",

  },
  "author": "HB,NC,AR,CS",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/clsavino/react-shift-scheduler/issues"
  },
  "homepage": "https://github.com/clsavino/react-shift-scheduler#readme",
  "dependencies": {
    "axios": "^0.15.3",
    "bluebird": "^3.4.6",
    "body-parser": "^1.15.2",
    "dotenv": "^4.0.0",
    "express": "^4.14.0",
    "express-session": "^1.14.2",
    "mongoose": "^4.7.3",
    "morgan": "^1.7.0",
    "passport": "^0.3.2",
    "passport-google-auth": "^1.0.1",
    "passport-google-oauth": "^1.0.0",
    "passport-linkedin-oauth2": "^1.4.1",
    "passport-local": "^1.0.0",
    "passport-local-mongoose": "^4.0.0",
    "path": "^0.12.7",
    "react": "^15.4.1",
    "react-big-calendar": "^0.19.2",
    "react-dnd": "^2.6.0",
    "react-dnd-html5-backend": "^2.6.0",
    "react-dom": "^15.4.1",
    "react-router": "^3.0.0",
    "react-router-dom": "^4.3.1",
    "react-tabs": "^2.3.0"
  },
  "devDependencies": {
    "babel-core": "^6.3.13",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "webpack": "^1.13.1"
  }
}

app build is successful ，但错误是在访问 Scheduler 组件时。是不是因为一些路由器依赖？

Answer 1

像这样导出你的组件：

export default Scheduler;

您的导入可能有问题： 试试这个：

var BigCalendar = require("react-big-calendar");

如果问题仍然存在，应该可以告诉我