ReactDOM.render 为自定义元素提供错误

Question

如果我在 left-nav.jsx 内呈现 MyLeftNav，它就可以工作。但是当我尝试在 App.jsx 内渲染它时，它构建得非常好，但随后在浏览器控制台中出现以下错误：

警告：React.createElement：类型不应为空、未定义、布尔值或数字。应该是字符串...

构建工具和命令：

babel --presets es2015,react jsx/*.jsx --out-dir jsx/
browserify jsx/jsx/app.js --o js/bundle.js

我注意到作为 browserify 输出的 bundle.js 文件在导入 MyLeftNav 之前放置了渲染语句。我不完全知道我的导入语句有什么问题。以下是 jsx 文件：

App.jsx :

import ReactDOM from 'react-dom';
import {MyLeftNav} from './left-nav'

ReactDOM.render(<MyLeftNav />, document.getElementById('left-nav'));

左-nav.jsx :

import React from 'react';
//import ReactDOM from 'react-dom';
import {RaisedButton} from 'material-ui'
import {AppBar} from 'material-ui'
import {LeftNav} from 'material-ui'
//import {NavMenuItem} from './nav-menu'
import {ListItem} from 'material-ui'
import {FontIcon} from 'material-ui'


export default class NavMenuItem extends React.Component {

    constructor(props)
    {
        super(props);
        this.handlePageChange = this.handlePageChange.bind(this);
    }

    handlePageChange()
    {
        $.mobile.changePage("#" + this.props.pageId, {transition:"slide"});
    }

    render()
    {
        return (
            <a href={this.props.pageId} >
                <ListItem primaryText={this.props.name}  leftIcon=
                    {
                        <FontIcon
                          className = "muidocs-icon-action-home"
                        />
                     }
                />
            </a>
        );
    }
}


export default class MyLeftNav extends React.Component {

    constructor(props)
    {
        super(props);
        this.state = {open: false};
        this.handleToggle = this.handleToggle.bind(this);
    }

    handleToggle()
    {
        this.setState({open: !this.state.open});
    }

    render()
    {
        return (
            <div>
                <RaisedButton
                    label="Toggle LeftNav"
                    onClick={this.handleToggle}
                />
                <LeftNav width={200} open={this.state.open}>
                    <AppBar title="AppBar" onClick={this.handleToggle}/>
                    <NavMenuItem name="Home" pageId="#home"/>
                    <NavMenuItem name="Page1" pageId="#page1"/>
                </LeftNav>
            </div>
        );
    }
}

//ReactDOM.render(<MyLeftNav />, document.getElementById('left-nav'));

Answer 1

只需使用 export，而不是 export default，这将允许您使用花括号 {MyLeftNav}

导入 class

如果坚持使用export default，模块必须分开，class can/must这样导入：

import MyLeftNav from './left-nav'

此外，不允许在单个模块中使用多个 export default。

ReactDOM.render 为自定义元素提供错误

ReactDOM.render Giving Error For Custom Elements

browserify

ecmascript-6

reactjs

babeljs