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;

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"
  }
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 に答える
0

render メソッドを忘れた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 に答える