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

var课程中您不能拥有Home。 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>

当invisible为假时，这样做会使方格this.state.showSquare成立。然后在导航栏中添加一个更改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]}))
    }

单击时呈现组件的问题

1 个答案: