不變違規：反應錯誤＃130

所以我當前正在嘗試呈現在網站中找到的自定義邊欄代碼：How to build a custom sidebar in React 。但我得到的錯誤：不變違規：反應錯誤＃130

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of TheSidebar

我無法理解它有什麼問題，但仍然，我是新的React。在節點上運行它。任何幫助表示讚賞。下面是代碼：

const React = require('react'); 
const ReactDOM = require('react-dom'); 
const { IndexLink, Link } = require('react-router'); 
// import './Sidebar.scss' 
const classNames = require('classnames'); 




class TheSidebar extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      showMenu: false 
     } 
     this.toggleMenu = this.toggleMenu.bind(this) 
    } 
    componentDidMount() { 
     document.addEventListener('click', this.handleClickOutside.bind(this), true); 
    } 

    componentWillUnmount() { 
     document.removeEventListener('click', this.handleClickOutside.bind(this), true); 
    } 
    toggleMenu() { 
     this.setState({ showMenu: !this.state.showMenu }) 
    } 
    handleClickOutside(event) { 
     const domNode = ReactDOM.findDOMNode(this); 

     if ((!domNode || !domNode.contains(event.target))) { 
      this.setState({ 
       showMenu: false 
      }); 
     } 
    } 

    render() { 

     const showMenu = this.state.showMenu; 
     const sidebarClass = classNames({ 
      'sidebar': true, 
      'sidebar-menu-expanded': showMenu, 
      'sidebar-menu-collapsed': !showMenu 
     }); 

     const elementsClass = classNames({ 
      'expanded-element': true, 
      'is-hidden': !showMenu, 
     }); 



    return (
     <nav className={sidebarClass}> 
     <img 
      className="menuIcon" 
      // src={} 
      onClick={this.toggleMenu} 
     /> 
     <ul> 
      <li> 
      <Link className="expandable" to="/setting" title="Setting"> 
       <img 
       src={'https://png.icons8.com/setting/ffffff'} 
       alt="" 
       /> 
       <span className={elementsClass}>Setting</span> 
      </Link> 
      </li> 
     </ul> 
     </nav> 

     ); 
    } 
} 


module.exports = TheSidebar;

的邊欄，然後注入到一個應用程序文件與標題一起，然後渲染。該應用程序文件和渲染文件如下：

const React = require('react'); 
const Header = require('./Header.jsx'); 
const TheSidebar = require('./Sidebar.jsx'); 

class App extends React.Component { 
    render() { 
     return(
      <div> 
       <head> 
        <title>TESTING</title> 
       </head> 
       <body> 
        <div> 
         <Header /> 
        </div> 
        <div> 
         <TheSidebar /> 
        </div> 
       </body> 
      </div> 
     ); 
    } 
} 
module.exports = App;

和呈現：

app.set('views', path.join(__dirname, "../views")); 
app.set('view engine', 'jsx'); 
app.engine('jsx', createEngine()); 
app.get("/testing", function(req, res){ 
    res.render('pages/App.jsx'); 
});

來源

2017-09-14 minus.273

確保已正確導入來自react-router的「鏈接」組件。 – Sulthan

@Sulthan我如何確保它被正確導入？ –

@Sulthan，從console.log看來，鏈接沒有正確導入，我不知道爲什麼 –

Link和IndexLink導出爲一個默認的出口對象中的字段，所以如果你使用的「需要」，則第一個獲得默認出口：

const ReactRouter = require('react-router')

，然後從中挑選出各個字段：

const IndexLink = ReactRouter.IndexLink 
const Link = ReactRouter.Link

編輯：如果您的反應路由器版本是> = 4.0，那麼索引是更長的裏面。它在react-router-dom中。並且IndexLink不再可用。您應該還原爲3.x以運行此示例代碼

來源

2017-09-14 13:32:24

你的觀點是好的。但我只是試了一下，錯誤仍然存在。 –

@ minus273請參閱我的編輯。可能幫助，可能不會:-) – 2017-09-14 14:33:28

有4.2版本，所以我想我需要恢復它的所有時間的緣故我把這個：/但我很困惑我該怎麼回覆？ –

您還沒有導入IndexLink和鏈接組件正確。在ES6中檢出命名導入。

你應該像這樣導入它們。

import { IndexLink, Link } from 'react-router'

來源

2017-09-14 13:11:11 codeslayer1

我不能這樣做，因爲我在node.js上運行它。我其實應該在我的帖子中加上這個，我的不好。 –

你能告訴你如何在你的應用中使用這個組件嗎？因爲我只是在我的應用程序中複製了相同的代碼，所以它似乎工作正常。 – codeslayer1

我剛剛編輯我的帖子，在那裏檢查 –

不變違規：反應錯誤＃130

回答

相關問題