有條件地渲染靜態部分的反應 - 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 
     }; 
    } 
    . 
    . 
    .