Question

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

我正在使用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;

每个列表项都有一个命名数据属性。当该属性是活动项时，我想再渲染部分属性。目前所有人都在渲染。

我已阅读有关条件渲染的反应文档：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 />}

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

修改

你必须在你的类中添加一个构造函数才能使其成为有状态的

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

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

1 个答案: