有条件地渲染静态部分的反应 - 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; 

每个列表项有一个名为数据属性。当该属性是活动项目时，我想要渲染该部分。目前他们都在渲染。

我已阅读上的反应条件呈现文档：https://facebook.github.io/react/docs/conditional-rendering.html

我试图界定一个const称为主动，我认为可能利用引导类的 - 但是，这是行不通的。对于如何做到这一点，我必须得到错误的结局。我看起来像一个简单的隐藏节目为一个轨道js切换。我无法弄清楚如何开始解决这个问题。

任何人都可以给我一个正确的方向指导吗？

Answer 1

跟踪哪些列表项目是活跃在您的国家

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

然后有条件地仅使活动项目

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

但我建议使用反应路由器替代，因为每个项目似乎对应页面。

编辑

你有一个构造函数添加到类，使其状态

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