javascript - react 中静态部分的条件渲染 - MERN

Question

我正在尝试弄清楚如何有条件地渲染部分 react 。我的条件是，当列表项处于事件状态时，应呈现部分内容。

我正在使用 bootstrap，它有一个可用的事件元素。

我的目标是实现类似于对讲机条款页面的内容: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 的常量，我认为它可能会使用 Bootstrap 类 - 但它不起作用。对于如何执行此操作，我必须坚持错误的一端。我看起来像是一个简单的隐藏显示，用于 rails js 切换。我不知道如何开始在 React 中解决这个问题。

谁能给我指引正确的方向？

Answer 1

跟踪哪个列表项在您的状态下处于事件状态

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

然后有条件地只渲染事件项

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

但我建议改用 React Router，因为每个项目似乎都对应一个页面。

编辑

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

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