Question

我正在尝试使用reactjs创建一个可滑动的侧边栏。但由于某些原因，它没有发生。我写的代码如下所示;

Sidebar.js

import React, { Component } from 'react';

class Sidebar extends Component {
  render() {
    return (
      <div id="sidebar-wrapper">
        <ul className="sidebar-nav">
          <li className="sidebar-brand">
            <a href="#">Start Bootstrap</a>
          </li>
          <li>
            <a href="#">Dashboard</a>
          </li>
          <li>
            <a href="#">Shortcuts</a>
          </li>
          <li>
            <a href="#">Overview</a>
          </li>
          <li>
            <a href="#">Events</a>
          </li>
          <li>
            <a href="#">About</a>
          </li>
          <li>
            <a href="#">Services</a>
          </li>
          <li>
            <a href="#">Contact</a>
          </li>
        </ul>
      </div>
    );
  }
}

export default Sidebar;

app.js

import React, { Component } from 'react';
import Sidebar from './Components/Sidebar/Sidebar'

class App extends Component {
  constructor() {
    super();
    this.state = {
      showResults: true
    }
    this.handleSlide = this.handleSlide.bind(this);
  }
  handleSlide() {
    this.setState({ showResults: !this.state.showResults })
  }

  render() {
    return (
      <div id="wrapper" className="toggled">
        {this.state.showResults ? <Sidebar /> : null}
        <div id="page-content-wrapper">
          <div className="container-fluid">
            <button onClick={this.handleSlide}>
              {this.state.open ? 'Close' : 'Open'}
            </button>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

此代码仅切换状态，并通过其显示或隐藏侧边栏div。但是有可能用这个创造一个可滑动的div。我不想使用互联网上提供的任何插件。所以有人可以帮我解决这个问题。

Answer 1

您可以使用 react-react-addons-css-transition-group npm模块中的 ReactCSSTransitionGroup 。

像这样使用：

import React from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'

class MyComponent extends Component {

    render() {
        <ReactCSSTransitionGroup 
         transitionName="slider"
         transitionEnterTimeout={1000}
         transitionLeaveTimeout={1000}
        >
          {(this.state.showResults)?<Sidebar />:null}
        </ReactCSSTransitionGroup>
    }
}

然后在你的CSS中：

.slider-enter {
  opacity: 0.01;
  transition: opacity 500ms ease-in;
}

.slider-leave {
  opacity: 0.01;
  transition: opacity 500ms ease-in;
}

详细了解ReactCSSTransition here

Answer 2

您可以先使用css隐藏侧栏组件，然后在点击时用动画显示它。我创建了一个演示here。

如何使用reactjs创建可滑动的侧边栏

2 个答案: