反应错误 - 未捕获的不变违规：元素类型无效

Posted 2023-02-21

【中文标题】反应错误 - 未捕获的不变违规：元素类型无效

【英文标题】：React Error - Uncaught Invariant Violation: Element type is invalid

【发布时间】：2016-07-20 08:00:51

【问题描述】：

...期待一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象。

您好，我目前正在尝试使用 React，我正在学习一个过时的教程，这会导致一些问题。我正在尝试自己修改错误，但是我在尝试设置路线时偶然发现并收到此错误；

错误信息

Uncaught Invariant Violation: Element type is invalid expected a string (for built-in components) or a class/function (for composite components) but got: object.

我怀疑导致此问题的代码位于我的 app-client.js 文件中，如下所示；

app-client.js

var React = require('react'),
Router = require('react-router'),
ReactDOM = require('react-dom'),
Route = Router.Route,
DefaultRoute = Router.DefaultRoute,
App = require('./components/App'),
Audience = require('./components/audience').default,
Speaker = require('./components/speaker'),
Board = require('./components/board'),
routes;

routes = (
    <Route handler = App>
        <DefaultRoute handler=Audience />
        <Route path="speaker" handler=Speaker></Route>
        <Route path="board" handler=Board></Route>
    </Route>
);

ReactDOM.render(<Router>routes</Router>, document.getElementById('react-container'));

我不怀疑它来自我的 app.js 文件，但为了找出问题所在，我将其包含在内；

App.js

var React = require('react'),
Router = require('react-router'),
RouteHandler = Router.RouteHandler,
io = require('socket.io-client'),
Header = require('./parts/header.js'),
App;

App = React.createClass(

    getInitialState() 
        return 
            status: 'disconnected',
            title: ''
        
    ,

    componentWillMount() 
        this.socket = io('http://localhost:5432/');
        this.socket.on('connect', this.connect);
        this.socket.on('disconnect', this.disconnect);
        this.socket.on('welcome', this.welcome);
    ,

    connect() 
        this.setState( status: 'connected' );
    ,

    disconnect() 
        this.setState( status: 'disconnect');
    ,

    welcome(serverState) 
        this.setState( title: serverState.title );
    ,

    render() 
        return (
            <div>
                <Header title=this.state.title status=this.state.status />
                <RouteHandler />
            </div>
        );
    
);

module.exports = App;

有人可以指出答案的方向或可以提供更多信息的地方吗？

【问题讨论】：

看起来你没有在某处为 React.createElement 提供正确的类型，这通常意味着某些组件没有正确创建。您是否获得有关错误发生位置的任何其他信息？

【参考方案1】：

看起来您正在尝试使用错误的东西（整个 react-router 库）创建 <Router/>。尝试改变

Router = require('react-router'),

到

Router = require('react-router').Router

所以你可以使用路由器属性来自 React-router，而不是整个模块本身。

至于错误消息：React 期望将字符串或 ReactClass（它是一个函数/es6 类）作为第一个参数传递给 React.createElement()。 JSX 只是一种将 xml 样式标记转换为适合您的 React.createElement() 集合的方法。因此，当您尝试创建 <Router/> 时，正在创建 React.createElement(Router) 并且整个 react-router 对象被传入，因此投诉:)

【讨论】：

我试过这个，但没有多大成功。但我明白了这一点，它启发了我只用 ES6 编写应用程序，这让这不是问题。

酷；所以我的解决方案修复了它？主要问题是没有引入正确的模块，这可以在 ES6 或非 ES6 中修复

太棒了！只需确保 :) 需要正确的模块可能会很棘手，并且会导致难以理解的错误。希望这会对其他人有所帮助，我之前因不小心没有大写等而遇到过这种事情