Javascript 如何使组件消失，然后在需要时重新出现？

我正在尝试构建一个小型的聚会系统菜单，现在我已经制作了“In-Queue”组件，它看起来像这样：

import {EventEmitter} from 'events';
import React from 'react';

let ee = new EventEmitter();

class PartyQueueSection extends React.Component {
    constructor(props, ee) {
        super(props);
        this.state = {
         timeString: "0H : 0M : 0S",
         timeInterval: function(){},
         hours: 0,
         minutes: 0,
         seconds: 0,
         ee: ee
        }
    }
    startCounter() {
        this.props.setActiveReveal("InQueue");
        let {timeInterval, hours, minutes, seconds, timeString} = this.state;
        hours   = 0;
        minutes = 0;
        seconds = 0;
        timeString = "0H : 0M : 0S";
        timeInterval = setInterval(this.incrementCounter.bind(this), 1000);
        this.setState({timeInterval, hours, minutes, seconds, timeString});
    }
    stopCounter() {
        let {timeInterval} = this.state;
        clearInterval(timeInterval);
        timeInterval = null;
        this.setState({timeInterval});
        $('#PartyApp').foundation('close');
        this.props.setActiveReveal("Other");
    }
    incrementCounter() {
        let {timeString, hours, minutes, seconds} = this.state;
        ++seconds;
        if (seconds >= 60) {
            seconds = 0;
            ++minutes;
        }
        if (minutes >= 60) {
            minutes = 0;
            ++hours;
        }
        timeString = hours + "H : " + minutes + "M : " + seconds + "S";
        this.setState({timeString, hours, minutes, seconds});
    }
    componentDidMount() {
        ee.on('startCounter', this.startCounter.bind(this));
    }
    componentWillUnmount() {
        this.stopCounter();
    }
    render() {
        return (
            <div className="row">
                <div className="large-5 columns large-centered text-center">
                    <h2>You are in the queue</h2>
                    <h1>{this.state.timeString}</h1>
                    <br/>
                    <button className="button alert expanded" onClick={this.stopCounter.bind(this)}>Leave Queue</button>
                </div>
            </div>
        )
    }
}

$('#enterQueueButton').on('click', function(e) {
   e.preventDefault();
   ee.emit('startCounter'); 
});

export default PartyQueueSection;

var ReactDOM = require('react-dom');
import React from 'react';
import PartyQueueSection from './PartyQueueSection.jsx';

class PartyApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeReveal: 'InQueue'
        }
    }
    setActiveReveal(name) {
        this.setState({activeReveal: name});
    }
    render() {
        return (
          <div>
            {(() => {
                switch(this.state.activeReveal) {
                    case "InQueue": return <PartyQueueSection setActiveReveal={this.setActiveReveal.bind(this)} />
                };
            })()}
          </div>
        )
    }
}

ReactDOM.render(<PartyApp/>, document.getElementById("PartyApp"))

从“事件”导入{EventEmitter}；
从“React”导入React；
设ee=neweventemitter（）；
类PartyQueueSection扩展了React.Component{
建造师（道具，ee）{
超级（道具）；
此.state={
时间字符串：“0H:0M:0S”，
时间间隔：函数（）{}，
小时:0，
分钟:0，
秒：0，
ee:ee
}
}
startCounter（）{
this.props.setActiveReveal（“InQueue”）；
让{timeInterval，hours，minutes，seconds，timeString}=this.state；
小时=0；
分钟=0；
秒=0；
timeString=“0H:0M:0S”；
timeInterval=setInterval（this.incrementCounter.bind（this），1000）；
this.setState（{timeInterval，hours，minutes，seconds，timeString}）；
}
停止计数器（）{
设{timeInterval}=this.state；
clearInterval（时间间隔）；
时间间隔=空；
this.setState（{timeInterval}）；
$（'PartyApp'）。基金会（'close'）；
this.props.setActiveReveal（“其他”）；
}
递增计数器（）{
让{timeString，hours，minutes，seconds}=this.state；
++秒；
如果（秒>=60）{
秒=0；
++会议记录；
}
如果（分钟>=60）{
分钟=0；
++小时数；
}
时间串=小时+小时+分钟+米+秒+秒；
this.setState（{timeString，hours，minutes，seconds}）；
}
componentDidMount（）{
ee.on（'startCounter'，this.startCounter.bind（this））；
}
组件将卸载（）{
这是stopCounter（）；
}
render（）{
返回(
你在排队
{this.state.timeString}


离开队列
)
}
}
$（'enterQueueButton'）。在（'click'，函数（e）{
e、 预防默认值（）；
ee.emit（'startCounter'）；
});
导出默认PartyQueueSection；

然后，主应用程序组件如下所示：

import {EventEmitter} from 'events';
import React from 'react';

let ee = new EventEmitter();

class PartyQueueSection extends React.Component {
    constructor(props, ee) {
        super(props);
        this.state = {
         timeString: "0H : 0M : 0S",
         timeInterval: function(){},
         hours: 0,
         minutes: 0,
         seconds: 0,
         ee: ee
        }
    }
    startCounter() {
        this.props.setActiveReveal("InQueue");
        let {timeInterval, hours, minutes, seconds, timeString} = this.state;
        hours   = 0;
        minutes = 0;
        seconds = 0;
        timeString = "0H : 0M : 0S";
        timeInterval = setInterval(this.incrementCounter.bind(this), 1000);
        this.setState({timeInterval, hours, minutes, seconds, timeString});
    }
    stopCounter() {
        let {timeInterval} = this.state;
        clearInterval(timeInterval);
        timeInterval = null;
        this.setState({timeInterval});
        $('#PartyApp').foundation('close');
        this.props.setActiveReveal("Other");
    }
    incrementCounter() {
        let {timeString, hours, minutes, seconds} = this.state;
        ++seconds;
        if (seconds >= 60) {
            seconds = 0;
            ++minutes;
        }
        if (minutes >= 60) {
            minutes = 0;
            ++hours;
        }
        timeString = hours + "H : " + minutes + "M : " + seconds + "S";
        this.setState({timeString, hours, minutes, seconds});
    }
    componentDidMount() {
        ee.on('startCounter', this.startCounter.bind(this));
    }
    componentWillUnmount() {
        this.stopCounter();
    }
    render() {
        return (
            <div className="row">
                <div className="large-5 columns large-centered text-center">
                    <h2>You are in the queue</h2>
                    <h1>{this.state.timeString}</h1>
                    <br/>
                    <button className="button alert expanded" onClick={this.stopCounter.bind(this)}>Leave Queue</button>
                </div>
            </div>
        )
    }
}

$('#enterQueueButton').on('click', function(e) {
   e.preventDefault();
   ee.emit('startCounter'); 
});

export default PartyQueueSection;

var ReactDOM = require('react-dom');
import React from 'react';
import PartyQueueSection from './PartyQueueSection.jsx';

class PartyApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeReveal: 'InQueue'
        }
    }
    setActiveReveal(name) {
        this.setState({activeReveal: name});
    }
    render() {
        return (
          <div>
            {(() => {
                switch(this.state.activeReveal) {
                    case "InQueue": return <PartyQueueSection setActiveReveal={this.setActiveReveal.bind(this)} />
                };
            })()}
          </div>
        )
    }
}

ReactDOM.render(<PartyApp/>, document.getElementById("PartyApp"))

var ReactDOM=require（'react-dom'）；
从“React”导入React；
从“./PartyQueueSection.jsx”导入PartyQueueSection；
类PartyApp扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
activeReveal:“InQueue”
}
}
setActiveReveal（名称）{
this.setState（{activeReveal:name}）；
}
render（）{
返回(
{(() => {
开关（this.state.activeReveal）{
案例“InQueue”：返回
};
})()}
)
}
}
ReactDOM.render（，document.getElementById（“PartyApp”））

但当我单击“离开队列”，然后再次单击“进入队列”时，我会收到以下消息：

警告：设置状态（…）：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState（）。这是禁止的。

因此，我不确定为什么它会卸载，然后当我再次单击“输入队列”按钮时，它的工作方式似乎与我第一次单击它时的工作方式不同：

简而言之，点击“进入队列”按钮，一切正常，我可以观察计时器计数和一切，然后我再次点击“离开队列”，然后再次点击“进入队列”，它给出了上述错误

我不知道这是否是因为我使用了

事件发射器

，所以我可以在组件外部（导航栏中）创建一个锚，触发我的react组件内部的某个东西或什么。任何信息都很好，谢谢

---

基本上，我试图在展示区内创建一个SPA风格的视图，我只希望队列显示玩家在队列中的时间，我只希望派对组件显示玩家在派对中的时间，依此类推

enterQueueButton位于哪个组件中？它似乎位于一个单独的组件中，而不是您声明单击回调的组件中。我猜您需要取消订阅componentWillUnmount中的“startCounter”事件，以防止您卸载的组件获取事件。

enterQueueButton

位于哪个组件中？它似乎位于一个单独的组件中，而不是您声明单击回调的组件中。我猜您需要取消订阅componentWillUnmount中的“startCounter”事件，以防止您卸载的组件获取事件。