javascript - 单击时呈现组件的问题

Question

我试图在主页中显示一个页面，可以这么说，通过单击导航栏中的链接，然后在不离开主页的情况下显示一个“方形”信息。这是我的家:

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。我该如何修复这个错误？另外，这是最好的方法吗？或者有人可以推荐更好的方法吗？

Answer 1

Home 类中不能有 var。 JS 中不允许这样做。将其移到 imports 下方。

你要显示的方 block 也是这个组件吗？

<div>
   <h2> BBB </h2>
</div>

添加一个名为 .invisible 的 CSS 类，如下所示

.invisible{
   display:none;
}

然后在家庭状态中执行类似的操作

this.state = {
    showSquare:false
}

并在渲染

   <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 时使正方形不可见。然后在导航栏中添加一个单击处理程序来更改 state.showSquare

<li onClick={this.toggleShowSquare}>Show Square</li>

其中 toggleShowSquare() 是

toggleShowSquare(){
   this.setState((prevState)=>({showSquare:!prevState.showSquare}))
}

记得做

this.toggleShowSquare = this.toggleShowSquare.bind(this) 在构造函数

编辑:回复评论。对于多个 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]}))
    }