Question

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

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

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

我的Scheduler组件： 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");

应该可以让我知道问题是否仍然存在

ReactJs组件渲染失败

1 个答案: