未捕获的错误：始终违反：元素类型无效：预期为字符串（对于内置组件）或类/函数，但得到了：对象

本文翻译自：Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

I am getting this error: 我收到此错误：

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 未捕获的错误：始终违反：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象。

This is my code: 这是我的代码：

var React = require('react')
var ReactDOM =  require('react-dom')
var Router = require('react-router')
var Route = Router.Route
var Link = Router.Link

var 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)

My Home.jsx file: 我的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;

---

#1楼

参考：https://stackoom.com/question/2JCuZ/未捕获的错误-始终违反-元素类型无效-预期为字符串-对于内置组件-或类-函数-但得到了-对象

---

#2楼

您需要导出默认值或require（path）.default

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

---

#3楼

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 Router is also one of the properties of react-router . https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 Router也是react-router的属性之一。 So change your modules require code like that: 因此，更改模块需要这样的代码：

  var reactRouter = require('react-router')
  var Router = reactRouter.Router
  var Route = reactRouter.Route
  var Link = reactRouter.Link

If you want to use ES6 syntax the link use( import ), use babel as helper. 如果要使用ES6语法链接use（ import ），请使用babel作为帮助程序。

BTW, to make your code works, we can add {this.props.children} in the App , like 顺便说一句，为了使您的代码正常工作，我们可以在App添加{this.props.children} ，例如

render() {
  return (
    <div>
      <h1>App</h1>
      <ul>
        <li><Link to="/about">About</Link></li>
      </ul>
      {this.props.children}
    </div>

  )
}

---

#4楼

Have you just modularized any of your React components? 您是否刚刚对任何React组件进行了模块化？ If yes, you will get this error if you forgot to specify module.exports , for example: 如果是，则如果忘记指定module.exports ，则会出现此错误，例如：

non-modularized previously valid component/code: 非模块化先前有效的组件/代码：

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

modularized component/code with module.exports : 带有module.exports的模块化组件/代码：

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

---

#5楼

In my case ( using Webpack ) it was the difference between: 就我而言（ 使用Webpack ）是以下两者之间的区别：

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

vs 与

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

The second one works while the first is causing the error. 第二个起作用，而第一个引起错误。 Or the opposite. 或相反。

---

#6楼

In my case, that was caused by wrong comment symbols. 就我而言，这是由错误的注释符号引起的。 This is wrong: 这是错误的：

<Tag>
    /*{ oldComponent }*/
    { newComponent }
</Tag>

This is correct: 这是对的：

<Tag>
    {/*{ oldComponent }*/}
    { newComponent }
</Tag>

Notice the curly brackets 注意大括号