Javascript react-MERN中静态部分的条件呈现

我正在试图弄清楚如何在react中有条件地呈现分部。我的条件是，当列表项处于活动状态时，应该呈现部分内容

我使用的是bootstrap，它有一个活动元素可供使用

我的目标是实现类似intercom的术语页面：

在我的主菜单中，我有：

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

var Terms = require('../overview/terms.jsx');
var Privacy = require('../overview/privacy.jsx');
var Cookies = require('../overview/cookies.jsx');
var Thirdparty = require('../overview/thirdparty.jsx');
var Website = require('../overview/website.jsx');
var Sla = require('../overview/sla.jsx');
var Acceptable = require('../overview/acceptable.jsx');
var Billing = require('../overview/billing.jsx');
var Information = require('../overview/information.jsx');
var Incident = require('../overview/incident.jsx');
var Bug = require('../overview/bug.jsx');


class Menu extends React.Component {

render() {
    return (
      <div>
        <div className = "row">
          <div className = "col-md-8 col-md-offset-2 generalhead">
            Terms and Policies
          </div>
        </div>
        <div className = "row">
          <div className = "col-md-3 col-md-offset-1">
            <ul className="list-group">

              <a href="#" className="list-group-item list-group-item-action listitems" data-attribute = "terms">Terms of Service</a>
              <a href="#" className="list-group-item list-group-item-action listitems" data-attribute = "privacy">Privacy Policy</a>
              <a href="#" className="list-group-item list-group-item-action listitems" data-attribute = "cookies">Cookies</a>
              <a href="#" className="list-group-item list-group-item-action listitems" data-attribute = "thirdparty">Third Party Processors</a>
              <a href="#" className="list-group-item list-group-item-action listitems" data-attribute = "website">Website Use</a>
              <a href="#" className="list-group-item list-group-item-action listitems" data-attribute = "sla">Service Level Agreement</a>
              <a href="#" className="list-group-item list-group-item-action listitems" data-attribute = "acceptable">Acceptable Use</a>
              <a href="#" className="list-group-item list-group-item-action listitems" data-attribute = "billing">Billing</a>
              <a href="#" className="list-group-item list-group-item-action listitems" data-attribute = "information">Information Security</a>
              <a href="#" className="list-group-item list-group-item-action disabled listitems" data-attribute = "incident">Incident Response Plan</a>
              <a href="#" className="list-group-item list-group-item-action disabled listitems" data-attribute = "bug">Bug Bounty</a>

            </ul>
          </div>
          <div className = "col-md-6 col-md-offset-1">
             <Terms />
             <Privacy />
             <Cookies />
             <Thirdparty />
             <Website />
             <Sla />
             <Acceptable />
             <Billing />
             <Information />
             <Incident />
             <Bug />
          </div>

        </div>
      </div>
    );
  }
}

module.exports = Menu;

从“React”导入React；
从“react dom”导入react dom；
var Terms=require（'../overview/Terms.jsx'）；
var Privacy=require（'../overview/Privacy.jsx'）；
var Cookies=require（'../overview/Cookies.jsx'）；
var Thirdparty=require（'../overview/Thirdparty.jsx'）；
var-Website=require（'../overview/Website.jsx'）；
var Sla=require（'../overview/Sla.jsx'）；
var Acceptable=require（'../overview/Acceptable.jsx'）；
var Billing=require（'../overview/Billing.jsx'）；
var Information=require（'../overview/Information.jsx'）；
var Incident=require（'../overview/Incident.jsx'）；
var-Bug=require（'../overview/Bug.jsx'）；
类菜单扩展了React.Component{
render（）{
返回(
条款和政策



我试图定义一个名为active的const，我认为它可能会利用bootstrap类，但这不起作用。对于如何实现这一点，我肯定有错误的想法。我看起来像是rails js切换的一个简单隐藏显示。我不知道如何开始在react中解决这个问题

有人能给我一个正确的方向吗？
跟踪哪个列表项在您的状态下处于活动状态

<a href="#" onClick={() => this.setState({active: 'terms'})}>Terms of Service</a>

感谢您的帮助。我尝试使用此建议。我认为部分问题可能是我使用extend React来创建类而不是“create.class”。我更改了this语句，以确保“this”绑定，{this.state.active.bind（this）==“terms”&}。我得到一个错误，上面写着TypeError:无法读取Null的属性'active'。它与
扩展React没有任何关系。Component
这只意味着您正在扩展React提供的
组件
类。这是创建类组件的方法。或者您可以
扩展PureComponent
。无需
绑定（此）
到this.state.active。除非你在那里存储了一个你计划用作回调的函数，但是你会在类的构造函数中进行绑定。你需要在类上有一个构造函数，并使用
super
，这样你就可以访问
this
，然后设置类的初始状态。阅读@KyleRichardson-谢谢-如果我尝试使用FuzzyTree的建议，我会得到一个错误，上面写着：TypeError:无法读取null的属性'active'。通过谷歌搜索该错误建议使用bind语句。你能看到一些概述有相关的解释吗？好的，我没有提供答案，因为你的问题让我有点困惑。你所有的'lis'“t项”是锚定链接。是否有特殊原因？单击它们是否可以导航到某个地方？当您单击它们时，它们是否会加载部分内容？或者，当有人碰巧在该url上时，它们只是显示为活动的？这些部分内容是否与您的url相关？正如Kyle提到的@Mel，您需要向类添加构造函数。请参阅更新
{this.state.active == 'terms' && <Terms />}

class Menu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            active: false
        };
    }
    .
    .
    .