Question

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

您好我正在尝试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 文件中，看起来像;

应用-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;

有人可以指出我的答案方向或可以提供更多相关信息的地方。

Answer 1

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

Router = require('react-router'),

到

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

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

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

React Error - Uncaught Invariant Violation：元素类型无效

1 个答案: