Question

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

警告：React.createElement：type不应为null，undefined，boolean或number。它应该是一个字符串......

构建工具和命令：

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

我注意到，作为browserify输出的bundle.js文件在导入MyLeftNav之前放置了render语句。我不确切知道我的import语句有什么问题。以下是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'));

Answer 1

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

导入类

如果您坚持使用export default，则必须将模块分开，并且必须以这种方式导入类：

import MyLeftNav from './left-nav'

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

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

1 个答案: