REACT JS如何显示一个组件并在单击时隐藏其他组件

Question

我需要您的帮助，因为我无法建立一个包含很多隐藏和显示组件的单页网站。我从此代码开始，但是当我单击所有链接时，所有组件都同时显示。当我单击“项目组合”时，我将显示一个组件，而将其他组件隐藏。如果我单击“ Offres”，“ portfolio”将像其他显示“ Offres”一样隐藏。

非常感谢，对不起我的英语。

import './style.css'

import logo_studio from './assets/logo_studio.png'
import Main from './components/Main'
import Portfolio from './components/Portfolio'
import Offres from './components/Offres'
import Contact from './components/Contact'
import Apropos from './components/Apropos'

class App extends Component {
  constructor () {
    super()
    this.state = {
      name: 'React',
      showHideDemo1: false,
      showHideDemo2: false,
      showHideDemo3: false,
      showHideDemo4: false

    }
    this.hideComponent = this.hideComponent.bind(this)
  }

  hideComponent (name) {
    switch (name) {
      case 'showHideDemo1':
        this.setState({ showHideDemo1: !this.state.showHideDemo1 })
        break
      case 'showHideDemo2':
        this.setState({ showHideDemo2: !this.state.showHideDemo2 })
        break
      case 'showHideDemo3':
        this.setState({ showHideDemo3: !this.state.showHideDemo3 })
        break
      case 'showHideDemo4':
        this.setState({ showHideDemo4: !this.state.showHideDemo4 })
        break
      default:
        return <Main />
    }
  }

  render () {
    const { showHideDemo1, showHideDemo2, showHideDemo3, showHideDemo4 } = this.state


    return (
      <div className='section'>
        <img src={logo_studio} class='logo1' alt='' />

        <div className='connect sweep-to-right'>
          <div>Espace client</div>
          <i className='fas fa-user-circle userLogo' />
        </div>

        <div className='menu1'>
          <ul>
            <li className='hvr-float underline-from-left' onClick={() => this.hideComponent('showHideDemo1')}>Portfolio</li>
            <li className='hvr-float underline-from-left' onClick={() => this.hideComponent('showHideDemo2')}>Offres</li>
            <li className='hvr-float underline-from-left' onClick={() => this.hideComponent('showHideDemo3')}>A propos</li>
            <li className='hvr-float underline-from-left' onClick={() => this.hideComponent('showHideDemo4')}>Contact</li>
          </ul>
        </div>

        {showHideDemo1 && <Portfolio />}
        {showHideDemo2 && <Offres />}
        {showHideDemo3 && <Apropos />}
        {showHideDemo4 && <Contact />}

      </div>
    )
  }
}

export default App```

Answer 1

您必须使用路由器库来完成此任务react-router-dom。您可以通过更改代码来管理这种小型方案。由于您一次只需要显示一个组件，因此只能通过一个状态变量来管理它，例如说showComponentCount

通过给定的代码更改代码

import './style.css'
import logo_studio from './assets/logo_studio.png'
import Main from './components/Main'
import Portfolio from './components/Portfolio'
import Offres from './components/Offres'
import Contact from './components/Contact'
import Apropos from './components/Apropos'

class App extends Component {
  constructor () {
    super()
    this.state = {
      name: 'React',
      showComponentCount: 0
    }
    this.showComponent = this.showComponent.bind(this)
  }

  showComponent (count) {
    this.setState({ showComponentCount: count })
  }

  render () {
    const { showComponentCount } = this.state

    return (
      <div className='section'>
        <img src={logo_studio} class='logo1' alt='' />

        <div className='connect sweep-to-right'>
          <div>Espace client</div>
          <i className='fas fa-user-circle userLogo' />
        </div>

        <div className='menu1'>
          <ul>
            <li className='hvr-float underline-from-left' onClick={() => this.showComponent(0)}>Portfolio</li>
            <li className='hvr-float underline-from-left' onClick={() => this.showComponent(1)}>Offres</li>
            <li className='hvr-float underline-from-left' onClick={() => this.showComponent(2)}>A propos</li>
            <li className='hvr-float underline-from-left' onClick={() => this.showComponent(3)}>Contact</li>
          </ul>
        </div>

        {showComponentCount == 0 ? <Portfolio /> : null}
        {showComponentCount == 1 ? <Offres /> : null}
        {showComponentCount == 2 ?<Apropos /> : null}
        {showComponentCount == 3 ? <Contact /> : null}

      </div>
    )
  }
}

export default App

在此代码中，我将hideComponent更改为showComponent，因为我们一次只能显示一个组件。

我们只给每个组件分配一个编号，以便我们可以检查它是否呈现了一个组件。

我希望这对您有用。

Answer 2

您应该使用一个值来跟踪打开的内容并显示出来。我正在使用showItem来跟踪打开的内容。

import './style.css'

import logo_studio from './assets/logo_studio.png'
import Main from './components/Main'
import Portfolio from './components/Portfolio'
import Offres from './components/Offres'
import Contact from './components/Contact'
import Apropos from './components/Apropos'

class App extends Component {
  constructor () {
    super()
    this.state = {
      name: 'React',
      showItem: ''

    }
    this.hideComponent = this.hideComponent.bind(this)
  }

  hideComponent (name) {
    switch (name) {
      case 'showHideDemo1':
        this.setState({ showItem: this.state.showItem !== 'showHideDemo1' ? 'showHideDemo1' : '' })
        break
      case 'showHideDemo2':
        this.setState({ showItem: this.state.showItem !== 'showHideDemo2' ? 'showHideDemo2' : '' })
        break
      case 'showHideDemo3':
        this.setState({ showItem: this.state.showItem !== 'showHideDemo3' ? 'showHideDemo3' : '' })
        break
      case 'showHideDemo4':
        this.setState({ showItem: this.state.showItem !== 'showHideDemo4' ? 'showHideDemo4' : '' })
        break
      default:
        return <Main />
    }
  }

  render () {
    const { showItem } = this.state


    return (
      <div className='section'>
        <img src={logo_studio} class='logo1' alt='' />

        <div className='connect sweep-to-right'>
          <div>Espace client</div>
          <i className='fas fa-user-circle userLogo' />
        </div>

        <div className='menu1'>
          <ul>
            <li className='hvr-float underline-from-left' onClick={() => this.hideComponent('showHideDemo1')}>Portfolio</li>
            <li className='hvr-float underline-from-left' onClick={() => this.hideComponent('showHideDemo2')}>Offres</li>
            <li className='hvr-float underline-from-left' onClick={() => this.hideComponent('showHideDemo3')}>A propos</li>
            <li className='hvr-float underline-from-left' onClick={() => this.hideComponent('showHideDemo4')}>Contact</li>
          </ul>
        </div>

        {showItem === 'showHideDemo1' && <Portfolio />}
        {showItem === 'showHideDemo2' && <Offres />}
        {showItem === 'showHideDemo3' && <Apropos />}
        {showItem === 'showHideDemo4' && <Contact />}

      </div>
    )
  }
}

export default App```