React路由器与React v0.14.3
我正在使用React和Material-UI创建一个应用程序,我也包括了React-router。但我得到下面的错误(Uncaught TypeError:(0,_reactDom.ReactDOM)不是函数)当我运行我的应用程序。React路由器与React v0.14.3
我使用的阵营v0.14.3并作出反应,路由器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"
}
ReactDOM.render(...)
你只是错过了渲染调用
我想你忘了打电话的render
方法。
ReactDOM.render((
<Router history={history}>
<Route path="/" handler={Body} />
</Router>
), document.getElementById('app'))
嘿,当我这样做,我得到这个错误(忘记提及它在我的问题):未捕获错误:不变违规:元素类型无效:期望一个字符串(对于内置组件)或一个类/函数)但得到了:对象。 –
你试过用'component'替换'handler'吗? – juandemarco
@juandermarco你能告诉我怎么做吗?我第一次使用反应和yeoman。 –
有两个问题,我在这里看到:
- 由于以前的答案表明,你需要一个
ReactDOM.render(...)
电话。 - 您所看到的错误指的是导入未按照您引用的方式导出的内容。确保您正确导出和导入组件,即在组件文件中,导出
BodyComponent
,导入并将其用作BodyComponent
。希望my older answer可以帮助!
1.我正在使用.render。 2)BodyComponent被正确导出。没有路由器,我可以在浏览器中显示我的Bodycomponent。你可以通过我分享的jsfiddle。 –
你可以让你的'BodyComponent.jsx'中的代码成为你的问题的一部分,所以我们可以看到整个图片?它如何导出? –
@JanKimo:更新它。 –
你有错进口:
import Router from 'react-router';
import Route from 'react-router';
必须
import { Router, Route } from 'react-router';
你忘了渲染方法ReactDom.render()
嘿,当我使用.render我得到这些错误:未捕获的错误:不变违规:元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件),但得到:object。 –
看起来错误在渲染路径的更深处,我会重新检查React-Router的文档,然后去除所有组件。让他们只是为了呈现一个跨度,当它工作,然后加回你的组件。跟踪渲染图有更好的方法,但这是最简单的概念。 –