反应中静态部分的条件渲染 - MERN

Question

我试图弄清楚如何有条件地渲染部分反应。我的条件是，当列表项处于活动状态时，应该呈现部分。

我正在使用引导程序，它有一个可用的活动元素。

我的目标是实现类似于对讲机的条款页面：https://www.intercom.com/terms-and-policies#billing

在我的主菜单中，我有：

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 文档：https://facebook.github.io/react/docs/conditional-rendering.html

我试图定义一个名为 active 的 const，我认为它可能会利用 bootstrap 类——但这不起作用。对于如何做到这一点，我必须有错误的一端。我似乎是一个用于 rails js 切换的简单隐藏秀。我不知道如何开始在反应中解决这个问题。

谁能指引我正确的方向？

Answer 1

跟踪哪个列表项在您的状态中处于活动状态

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

然后有条件地只渲染活动项

{this.state.active == 'terms' && <Terms />}

但我建议改用 react 路由器，因为每个项目似乎都对应一个页面。

编辑

你必须为你的类添加一个构造函数来使它有状态

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