在React中显示/隐藏组件

Question

我是React的初学者，我正在尝试使用导航菜单制作侧边栏。 当用户单击带有className“frist”的li标签时，组件FrstComponent会打开，当用户单击带有className“li”的li标签时，SecondComponent会打开等。就像bootstrap选项卡一样。 这是我的代码

    class Navigation extends React.Component {
 constructor(props) {
    super(props)
    this.state = {
       isActive: "first"
    }
    this.handleClickChange =this.handleClickChange.bind(this)
  }

  handleClickChange(){
    this.setState={
        isActive: !this.state.isActive
    }
  }

  render() {
    const {active} = this.state.isActive
    if(active === 'first'){
      return <FristComponent/>
    }
    if(active === 'second'){
      return <SecondComponent/>
    }
    return (
      <div>
      <ul>
        <li 
        className="first"
        onClick={this.handleClickChange} 
        >
          FIRST

        </li>
        <li 
          className="second"   
          onClick={this.handleClickChange}
          >
          SECOND
        </li>
        <li className="third">THIRD</li>
        <li className="fourth">FOURTH</li>
        <li className="fifth">FIFTH</li>
      </ul>

      </div>
    )
  }
}

React.render(<Navigation />, document.getElementById('app'));

Answer 1

我正在努力帮助你，但你的代码需要更多的重构:)

import React from "react"
import ReactDOM from "react-dom";

class Navigation extends React.Component {
  state = {
    active: "first"
  }

  handleClickChange = e => {
    const { className } = e.target

    this.setState({ active: className})
  }

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

    return (
      <div>
        {active === 'first' && <div>First Component</div>}

        {active === 'second' && <div>Second Component</div>}

        <ul>
          <li className="first"
            onClick={this.handleClickChange}
          >
            FIRST

        </li>
          <li
            className="second"
            onClick={this.handleClickChange}
          >
            SECOND
        </li>
          <li className="third">THIRD</li>
          <li className="fourth">FOURTH</li>
          <li className="fifth">FIFTH</li>
        </ul>

      </div>
    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Navigation />, rootElement);

您需要将className传递给state并在渲染时检查此变量。 如果您对此代码有疑问，可以问:)