未知错误：不变冲突：元素类型无效：期望字符串(用于内置组件)或类/函数，但get：object

Question

未知错误：不变冲突：元素类型无效：期望字符串(用于内置组件)或类/函数，但get：object我得到了这个错误：不变量错误：不变冲突：元素类型无效：预期字符串(用于内置组件)或类/函数(用于组合组件)，但get：Object。这是我的密码：var React = require('react')var ReactDOM =  require('react-dom')var Router = require('react-router') var Route = Router.Routevar Link = Router.Linkvar App = React.createClass({   render() {     return (       <div>         <h1>App</h1>         <ul>           <li><Link to="/about">About</Link></li>         </ul>       </div>     )   }})var About = require('./components/Home')ReactDOM.render((   <Router>     <Route path="/" component={App}>       <Route path="about" component={About} />     </Route>   </Router>), document.body)我的Home.jsx档案：var React = require('react');var RaisedButton = require('material-ui/lib/raised-button');var Home = React.createClass({   render:function() {     return (         <RaisedButton label="Default" />     );   },});module.exports = Home;

Answer 1

就我而言(使用WebPack)这是以下两者之间的区别：

import {MyComponent} from '../components/xyz.js';

VS

import MyComponent from '../components/xyz.js';

第二种方法起作用，而第一种则导致错误。或者相反。

Answer 2

您需要导出默认值或要求(路径)。

var About = require('./components/Home').default

Answer 3

您是否刚刚模块化了您的任何反应组件？如果是，则如果忘记指定出口，例如：

非模块化以前有效的组件/代码：

var YourReactComponent = React.createClass({
    render: function() { ...

模块化组件/代码出口:

module.exports = React.createClass({
    render: function() { ...