5

我正在使用 React 和 Material-UI 创建一个应用程序，我也包含了 React-router。但是当我运行我的应用程序时出现以下错误（Uncaught TypeError: (0 , _reactDom.ReactDOM) is not a function ）。

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

BodyComponent 我写在一个不同的文件中，我将它导入到我的 main.js

我试过 ReactDOM.render 但我得到以下错误

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

我已经创建了相同的小提琴：

https://jsfiddle.net/69z2wepo/23814/

下面是我的代码：（更新代码）

'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;

主.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"
  }
4

5 回答 5

3

ReactDOM.render( ... )

你刚刚错过了渲染调用

于 2015-12-11T13:00:18.460 回答
3

我想你忘了调用该render方法。

ReactDOM.render((
    <Router history={history}>
        <Route path="/" handler={Body} />
    </Router>
), document.getElementById('app'))
于 2015-12-11T13:00:24.983 回答
1

我在这里看到两个问题：

  1. 正如前面的答案所暗示的，您需要一个ReactDOM.render( ... )电话。
  2. 您看到的错误是指导入了一些尚未按照您引用的方式导出的内容。确保正确导出和导入组件，即在组件文件中，导出BodyComponent、导入并将其用作BodyComponent. 希望我的旧答案可以提供帮助！
于 2015-12-11T13:27:40.730 回答
0

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

于 2016-05-26T07:36:46.110 回答
0

你有错误的进口：

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

一定是

import { Router, Route }  from 'react-router';
于 2016-02-08T08:18:16.237 回答