0
私は現在、サイト内にあるカスタムサイドバーのコードをレンダリングしようとしていました。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
私はそれが間違っていることを理解することはできませんが、私はリアクションに新しいです。ノード上で実行する。どんな助けもありがとうございます。ここ コードである：
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');
});
react-routerの 'Link'コンポーネントが適切にインポートされていることを確認してください。 – Sulthan
@Sulthanどのように正しくインポートされていることを確認できますか？ –
@Sulthanは、console.logのように、リンクが正しくインポートされていないとわかりません。理由は分かりません。 –