关闭侧边栏与反应结合反应状态答案

【问题标题】：Close sidebar with react in combination with react-state关闭侧边栏与反应结合反应状态
【发布时间】：2021-06-06 17:16:48
【问题描述】：

我写了一个静态侧边栏，每个图标在点击时都会打开一个“子侧边栏”。我用反应状态处理不同“子侧边栏”之间的切换。

但我无法管理在第二次单击图标时关闭子侧边栏。任何人都知道如何做到这一点？提前致谢。

import React, { Component } from 'react';
import { GrAdd, BsCollection, IoSettingsOutline } from '../icons';

import New from './sidebars/new';
import Collection from './sidebars/collection';
import Settings from './sidebars/settings';

import '../css/StaticBar.css'

class StaticBar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selected: 0,
        }
    }

    render() { 

       
        return ( 
            <div className="StaticBar">
            <ul>
            
                <li className="ListItem" onClick={() => this.setState({ selected: 0 })}>
                   <GrAdd color="white"/>
                </li>
          
                <li className="ListItem"  onClick={() => this.setState({ selected: 1 })}>
                   <BsCollection color="white" />
                </li>

                <li className="ListItem" onClick={() => this.setState({ selected: 2 })}>
                    <IoSettingsOutline color="white" />
                </li>
            </ul>

            {(this.state.selected === 0) && <New />}
            {(this.state.selected === 1) && <Collection />}
            {(this.state.selected === 2) && <Settings />}

            </div>
         );
    }
}
 
export default StaticBar;

【问题讨论】：

标签： css reactjs electron

【解决方案1】：

你可以使用这个有条件的 setState 逻辑

    import React, { Component } from 'react';
    import { GrAdd, BsCollection, IoSettingsOutline } from '../icons'; 
    import New from './sidebars/new';
    import Collection from './sidebars/collection';
    import Settings from './sidebars/settings';
    
    import '../css/StaticBar.css'
    
    class StaticBar extends Component {
        constructor(props) {
            super(props)
            this.state = {
                selected: 0,
            }
        }
    
        render() { 
    
           
            return ( 
                <div className="StaticBar">
                <ul>
                
                    <li className="ListItem" onClick={() => this.setState({ selected: 0 })}>
                       <GrAdd color="white"/>
                    </li>
              
                    <li className="ListItem"  onClick={() => this.setState({ selected: (this.state.selected==1 ? 0 : 1) })}>
                       <BsCollection color="white" />
                    </li>
    
                    <li className="ListItem" onClick={() => this.setState({ selected: ( this.state.selected==2 ? 0 : 2) })}>
                        <IoSettingsOutline color="white" />
                    </li>
                </ul>
    
                {(this.state.selected === 0) && <New />}
                {(this.state.selected === 1) && <Collection />}
                {(this.state.selected === 2) && <Settings />}
    
                </div>
             );
        }
    }
     
    export default StaticBar;

【讨论】：