如何在 React 上切换侧边栏

Question

我有一个之前用 Jquery 完成的切换示例。现在想用react做，但是不知道怎么做。

我将我的 Jquery 代码和 React 设计代码放在下面。

React 设计代码

Sidebar.js

`

import React from 'react';
import profileImage from '../../../assets/img/profil.jpg';
import iconImage from '../../../assets/img/icon.jpg';
import businessManImage from '../../../assets/img/business-man-white.svg';
import preferencessImage from '../../../assets/img/cogs-white.svg';
import logoutImage from '../../../assets/img/logout.svg';
import toggleImage from '../../../assets/img/toggle-icon.png';
import profileWhite from '../../../assets/img/profile-white.svg';
import classes from '../Sidebar/Sidebar.module.css';

const Sidebar = (props) => {
  let url = ""
  return (
    <div>
      <div className={classes['side-bar']}>
        <div className={classes['side-bar-top']}>
          <div className={classes['side-bar-icon']}>
            <img src={iconImage} alt="profileresmi" />
          </div>
        </div>


        <div className={classes['side-bar-row']} style={{height: '100px'}} >
          <div className={classes['side-bar-icons']} style={{width: '100px'}} >
            <div className={classes['side-bar-profile-image']}>
              <img src={profileImage} alt="profileresmi" />
            </div>
          </div>
          <div className={classes['side-bar-profile-content']}>
            <h3><b>Mert EKİNCİ</b></h3>
            <h4>mert@akturk.de</h4>
          </div>
        </div>

        <div className={classes['side-bar-row']}>
          <div className={classes['side-bar-icons']}>
            <a href={url} className={classes['side-bar-elements-icons']}>
              <img src={businessManImage} alt="profileresmi" />
            </a>
          </div>
          <div className={classes['side-bar-text']}>
            <a href={url}>Processes</a>
          </div>
        </div>

        <div style={{ clear: 'both' }} ></div>
        <div className={classes['side-bar-row']}>
          <div className={classes['side-bar-icons']}>
            <a href={url} className={classes['side-bar-elements-icons']}>
              <img src={preferencessImage} alt="profileresmi" />
            </a>
          </div>
          <div className={classes['side-bar-text']}>
            <a href={url}>Preferences</a>
          </div>
        </div>

        <div className={classes['side-bar-row']}>
          <div className={classes['side-bar-icons']}>
            <a href={url} className={classes['side-bar-elements-icons']}>
              <img src={profileWhite} alt="profileresmi" />
            </a>
          </div>
          <div className={classes['side-bar-text']}>
            <a href={url}>User</a>
          </div>
        </div>

        <div className={classes['side-bar-row']}>
          <div className={classes['side-bar-icons']}>
            <a href={url} className={classes['side-bar-elements-icons']}>
              <img src={logoutImage} alt="profileresmi" />
            </a>
          </div>
          <div className={classes['side-bar-text']}>
            <a href={url}>Logout</a>
          </div>
        </div>

      </div>
      <div className={classes['side-toggle']}>
        <span className={classes['side-bar-toggle']} >
          <img src={toggleImage} alt="profileresmi" />
        </span>
      </div>
    </div>

  );
}

export default Sidebar;

`

在这里，我通过隐藏和显示我的 div 来进行切换。

Jquery 侧边栏切换代码

Script.js

`

var isToggled = true;

var toggleDelay = 50;

var onclickSideToggle = function () {
    isToggled = !isToggled;
    toggleSidebar(isToggled);
};


$('#side-bar-toggle').on('click', onclickSideToggle);

var toggleSidebar = function (toggle) {

    if (toggle) {
        $('.side-bar-text').show(toggleDelay);
        $('.side-bar-profile-content').show(toggleDelay);

    } else {
        $(".side-bar-text").hide(toggleDelay);
        $('.side-bar-profile-content').hide(toggleDelay);

    }
};

`

你能给我一些关于如何用 React 做的信息吗？

Answer 1

如果您只想要 hide/show 而没有任何动画，您可以使用以下方法。您可以在此处找到有关 useState 挂钩用法的更多信息：https://reactjs.org/docs/hooks-reference.html#usestate

import React, { useState } from 'react';
import profileImage from '../../../assets/img/profil.jpg';
import iconImage from '../../../assets/img/icon.jpg';
import businessManImage from '../../../assets/img/business-man-white.svg';
import preferencessImage from '../../../assets/img/cogs-white.svg';
import logoutImage from '../../../assets/img/logout.svg';
import toggleImage from '../../../assets/img/toggle-icon.png';
import profileWhite from '../../../assets/img/profile-white.svg';
import classes from '../Sidebar/Sidebar.module.css';

const Sidebar = props => {
    const [isContentToggled, setIsContentToggled] = useState(true);

    let url = ""
    return (
        <div>
            <div className={classes['side-bar']}>
                <div className={classes['side-bar-top']}>
                    <div className={classes['side-bar-icon']}>
                        <img src={iconImage} alt="profileresmi" />
                    </div>
                </div>


                <div className={classes['side-bar-row']} style={{height: '100px'}} >
                    <div className={classes['side-bar-icons']} style={{width: '100px'}} >
                        <div className={classes['side-bar-profile-image']}>
                            <img src={profileImage} alt="profileresmi" />
                        </div>
                    </div>
                    {isContentToggled && (
                        <div className={classes['side-bar-profile-content']}>
                            <h3><b>Mert EKİNCİ</b></h3>
                            <h4>mert@akturk.de</h4>
                        </div>
                    )};
                </div>

                <div className={classes['side-bar-row']}>
                    <div className={classes['side-bar-icons']}>
                        <a href={url} className={classes['side-bar-elements-icons']}>
                            <img src={businessManImage} alt="profileresmi" />
                        </a>
                    </div>
                    {isContentToggled && (
                        <div className={classes['side-bar-text']}>
                            <a href={url}>Processes</a>
                        </div>
                    )}
                </div>

                <div style={{ clear: 'both' }} ></div>
                <div className={classes['side-bar-row']}>
                    <div className={classes['side-bar-icons']}>
                        <a href={url} className={classes['side-bar-elements-icons']}>
                            <img src={preferencessImage} alt="profileresmi" />
                        </a>
                    </div>
                    {isContentToggled && (
                        <div className={classes['side-bar-text']}>
                            <a href={url}>Preferences</a>
                        </div>
                    )}
                </div>

                <div className={classes['side-bar-row']}>
                    <div className={classes['side-bar-icons']}>
                        <a href={url} className={classes['side-bar-elements-icons']}>
                            <img src={profileWhite} alt="profileresmi" />
                        </a>
                    </div>
                    {isContentToggled && (
                        <div className={classes['side-bar-text']}>
                            <a href={url}>User</a>
                        </div>
                    )}
                </div>

                <div className={classes['side-bar-row']}>
                    <div className={classes['side-bar-icons']}>
                        <a href={url} className={classes['side-bar-elements-icons']}>
                            <img src={logoutImage} alt="profileresmi" />
                        </a>
                    </div>
                    {isContentToggled && (
                        <div className={classes['side-bar-text']}>
                            <a href={url}>Logout</a>
                        </div>
                    )}
                </div>

            </div>
            <div className={classes['side-toggle']}>
            <span onClick={() => setIsContentToggled(prevIsContentToggled => !prevIsContentToggled)} className={classes['side-bar-toggle']}>
                <img src={toggleImage} alt="profileresmi" />
            </span>
            </div>
        </div>

    );
}

export default Sidebar;

如果你想用动画代码切换就差不多了。您只需要创建一些额外的类名，例如 .hidden 和隐藏元素的样式，然后替换

{isContentToggled && (
       <div className={classes['side-bar-profile-content']}>
            <h3><b>Mert EKİNCİ</b></h3>
            <h4>mert@akturk.de</h4>
       </div>
)};

与 adding/removing 这个类名取决于 isContentToggled 值。

如何在 React 上切换侧边栏

How do I toggle sidebar on React

reactjs

react-css-modules

react-redux

react-toggle

react-hooks