React.js切换内容

Question

我是React.js的新手。我尝试在所有类别之间切换（隐藏/显示）到所选子类别。下面的代码几乎正常工作。以下代码目前正在发生的事情是，当点击某个类别时，选择的类别隐藏及其子类别显示，但未显示的类别也会显示。我需要未隐藏的类别也隐藏。任何帮助都会很棒。谢谢！

class CategoryNav extends React.Component {
constructor(props) {
super(props);
this.state = {
  hasCategorySelected: false,
  activeElement: "category"
}
}

toggleElement(element) {
    if (this.state.hasCategorySelected === false) {
      this.setState({
        hasCategorySelected: true,
        activeElement: "subcategory"
      });
    }
    else {
      this.setState({
        hasCategorySelected: false,
        activeElement: "category"
      });
    }

  }

render() {
if (this.state.activeElement === "category") {
    return (
      <div>
      <BC.Section spacing="mini" className={this.state.activeElement === "category" ? 'bc-hidden' : 'active'}>
        <a onClick={this.toggleElement.bind(this, "subcategory")}>
            <BC.Text textColor="secondary">{this.props.category}</BC.Text>
        </a>
      </BC.Section>

      </div>

    )
  }else {
    return (
      <div>
      <BC.Section className={this.state.activeElement === "category" ? 'active' : 'bc-hidden'}>
          <a onClick={this.toggleElement.bind(this, "category")}>
              <BC.Section spacing="mini">
                <BC.Icon iconType="chevron-left" textColor="secondary" />
                <BC.Text textColor="secondary" textSize="small">Back to Categories</BC.Text>
              </BC.Section>
          </a>
          <BC.Heading headingLevel={3} spacing="mini" textColor="secondary">{this.props.category}</BC.Heading>
          <div>
            {this.props.children}
          </div>
      </BC.Section>
      </div>
    )
  }
}
}