[英]Problems with rendering a component on click
我试图在主页中显示一个页面,可以这么说,通过单击导航栏中的链接,然后在不离开主页的情况下显示“方形”信息。 这是我的家:
import React, { Component } from 'react';
import { Link } from 'react-router';
export default class Home extends Component {
var Music = React.createClass({
render: function() {
return (
<div>
<h2> BBB </h2>
</div>
);
}
});
render() {
return (
<div className='Home' id='Home'>
<div id='musicMenu'>
<ul>
<li id="music"><Link to="/music">Music</Link></li>
<li id="shows"><Link to="/shows">Shows</Link></li>
<li id="collections"><Link to="/collections">Collections</Link></li>
</ul>
</div>
</div>
);
}
}
这是我的app.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, hashHistory } from 'react-router';
import App from 'views/App';
import Home from 'views/Home';
import About from 'views/About';
import Cart from 'views/webcart';
import Music from 'views/music';
import Shows from 'views/shows';
import Collections from 'views/collections';
ReactDOM.render(
<Router history={ hashHistory }>
<Route path='/' component={ App }>
<IndexRoute component={ Home } />
<Route path='about' component={ About } />
<Route path='Cart' component={ Cart } />
<Route path='music' component={ Music } />
<Route path='shows' component={ Shows } />
<Route path='collections' component={ Collections } />
</Route>
</Router>,
document.getElementById('app') // eslint-disable-line
);
我在Webpack中遇到的错误是
ERROR in ./js/views/Home.js
Module build failed: SyntaxError: Unexpected token, expected
并指向var Music
。 我该如何解决这个错误? 此外,这是最好的方法,或任何人都可以推荐更好的方法?
Home
类中不能包含var
。 这在JS
是不允许的。 将它移到imports
下方的外面。
你想要显示的方块是这个组件吗?
<div>
<h2> BBB </h2>
</div>
像这样添加一个名为.invisible
的CSS类
.invisible{
display:none;
}
然后在家里state
做一些像
this.state = {
showSquare:false
}
在render
<div className='Home' id='Home'>
<div className={this.state.showSquare?'':'invisible'}>
<h2> BBB </h2>
</div>
<div id='musicMenu'>
<ul>
<li id="music"><Link to="/music">Music</Link></li>
<li id="shows"><Link to="/shows">Shows</Link></li>
<li id="collections"><Link to="/collections">Collections</Link></li>
</ul>
</div>
</div>
当this.state.showSquare
为false时,这样做会使方块invisible
。 然后在导航栏中添加一个更改state.showSquare
的单击处理程序
<li onClick={this.toggleShowSquare}>Show Square</li>
toggleShowSquare()
位置
toggleShowSquare(){
this.setState((prevState)=>({showSquare:!prevState.showSquare}))
}
记得做一个
this.toggleShowSquare = this.toggleShowSquare.bind(this)
在constructor
编辑 :回复评论。 对于多个div,请执行此操作
this.state = {
showSquareOne:false,
showSquareTwo:false
}
然后有像这样的div
<div className={this.state.showSquareOne?'':'invisible'}></div>
<div className={this.state.showSquareTwo?'':'invisible'}></div>
li
元素是这样的
<li onClick={()=>this.toggleShowSquare('showSquareOne')}>Show Square One</li>
<li onClick={()=>this.toggleShowSquare('showSquareTwo')}>Show Square Two</li>
和这样的功能
toggleShowSquare(property){
this.setState((prevState)=>({[property]:!prevState[property]}))
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.