ReactDOM.render爲自定義元素提供錯誤

如果我在左側nav.jsx中渲染MyLeftNav，它將起作用。但是，當我嘗試在App.jsx中呈現它時，它的構建完全正常，但隨後在瀏覽器控制檯中出現以下錯誤：ReactDOM.render爲自定義元素提供錯誤

警告：React.createElement：type不應爲null，undefined，boolean，或編號。這應該是一個字符串...

生成工具和命令：

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

我已經注意到，bundle.js文件，該文件是browserify的輸出使渲染聲明進口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'));

來源

2016-03-13 Akhil Mordia

只需使用export，不export default，這將讓你使用這樣的大括號導入班級{MyLeftNav}

如果你堅持使用export default，該模塊必須分離，類可以/必須導入這樣：

import MyLeftNav from './left-nav'

此外，多個export default個單個模塊中是不允許的。

來源

2016-03-13 12:28:53 dannyjolie

你這個人！感謝幫助！ –

ReactDOM.render爲自定義元素提供錯誤

回答

相關問題