Question

我正在使用React和Material-UI创建一个应用程序，我也包含了React-router。但是当我运行我的应用程序时，我得到以下错误（未捕获TypeError：（0，_reactDom.ReactDOM）不是函数）。

我正在使用React v0.14.3和React-Router v1.0.2

BodyComponent我写了一个不同的文件，我把它导入我的main.js

我尝试了ReactDOM.render但是我得到了以下错误

未捕获错误：不变违规：元素类型无效：预期字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象。

我为此创造了小提琴：

以下是我的代码:(更新代码）

'use strict';
import React from 'react';
import mui from 'material-ui';
import PhysicalView from './playground/PhysicalViewComponent';
import DataTable from './DataTableComponent';
const AppBar = require('material-ui/lib/app-bar');
require('styles//Body.sass');

const LeftNav = require('material-ui/lib/left-nav');

const MenuItem = mui.MenuItem;
const injectTapEventPlugin = require('react-tap-event-plugin');
injectTapEventPlugin();


var menuItems = [{
  route: 'device-view',
  text: 'Device'
}, {
  type: MenuItem.Types.SUBHEADER,
  text: '123'
}, {
  route: 'ola',
  text: 'ola'
}, {
  route: 'bridges',
  text: 'Bridges'
}, {
  route: 'interf',
  text: 'interf'
}, {
  type: MenuItem.Types.LINK,
  payload: 'https://github.com/callemall/material-ui',
  text: 'GitHub'
}, {
  text: 'Disabled',
  disabled: true
}, {
  type: MenuItem.Types.LINK,
  payload: 'https://www.google.com',
  text: 'Disabled Link',
  disabled: true
}];


class BodyComponent extends React.Component {

  _toggleMenu() {
    this.refs.leftNav.toggle();
  }

  render() {
    return (
      < div className = "body-component" >

      < header >

      < AppBar
      title = "vEDM"onLeftIconButtonTouchTap = {
          this._toggleMenu.bind(this)
       }
      iconClassNameRight = "muidocs-icon-navigation-expand-more" / >

      < /header>

      < LeftNav
      ref = "leftNav"
      docked = {
        false
      }
      //openRight = { true }
      menuItems = {
        menuItems
      }
      />

    <DataTable />


    < /div>
  );
}
}

BodyComponent.displayName = 'BodyComponent'

export default BodyComponent;

Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import mui from 'material-ui';
import Body from './BodyComponent';
import  Router  from 'react-router';
import Route from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
let history = createBrowserHistory();


ReactDOM.render((
    <Router history={history}>
      <Route path="/" component={Body} />
    </Router>
), document.getElementById('app'))

以下是我的package.json依赖项

"dependencies": {
    "history": "^1.13.1",
    "lodash": "^3.10.1",
    "material-ui": "^0.13.4",
    "normalize.css": "^3.0.3",
    "react": "^0.14.0",
    "react-addons-test-utils": "^0.14.0",
    "react-dom": "^0.14.0",
    "react-router": "^1.0.2",
    "react-tap-event-plugin": "^0.2.1",
    "vis": "^4.10.0"
  }

Answer 1

ReactDOM.render( ... )

你刚刚错过了渲染电话

Answer 2

我想您忘了拨打render方法。

ReactDOM.render((
    <Router history={history}>
        <Route path="/" handler={Body} />
    </Router>
), document.getElementById('app'))

Answer 3

我在这里看到两个问题：

如前所述，您需要ReactDOM.render( ... )来电。
您所看到的错误是指导入未按照您引用方式导出的内容。确保正确导出和导入组件，即在组件文件中导出BodyComponent，导入并将其用作BodyComponent。希望my older answer可以提供帮助！

Answer 4

您输入错误：

import  Router  from 'react-router';
import Route from 'react-router';

必须是

import { Router, Route }  from 'react-router';

Answer 5

您忘记了渲染方法ReactDom.render()

使用React v0.14.3实现路由器

5 个答案: