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

Question

我需要你的帮助，因为我无法制作一个包含许多隐藏和显示组件的单页网站。我从这段代码开始，但是当我单击所有 link 时，所有组件都同时显示。我会在单击 "portfolio" 时显示一个组件并隐藏其他组件。如果我点击 "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```

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

REACT JS How to show one component and hide the others on click

show-hide

reactjs

react-component