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

【问题标题】：ReactDOM.render Giving Error For Custom ElementsReactDOM.render 为自定义元素提供错误
【发布时间】：2016-03-13 11:37:12
【问题描述】：

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

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

构建工具和命令：

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'));

left-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'));

【问题讨论】：

标签： reactjs ecmascript-6 browserify babeljs

【解决方案1】：

只需使用export，而不是export default，这将允许您使用像{MyLeftNav} 这样的花括号导入类

如果你坚持使用export default，模块必须分开，类可以/必须这样导入：

import MyLeftNav from './left-nav'

另外，一个模块中不允许有多个export defaults。

【讨论】：