reactjs - 单击任何链接时如何关闭 react 侧边栏？

Question

我是 React 的新手，试图让这个组件工作:https://github.com/balloob/react-sidebar

它有效，除了在跟随链接时侧边栏不会关闭。如何单击侧边栏链接关闭侧边栏？

来自 index.js:

 render((
      <Router history={hashHistory}>
        <Route component={Nav}>
          <Route path="/pages/page1" component={Page1}/>
          <Route path="/pages/page2" component={Page2}/>
          <Route path="/pages/about" component={About} />
          <Route path="/users/firsttime" component={UsersFirsttime} />
          <Redirect from="/" to="/users/firsttime" />
        </Route>
      </Router>
    ), document.getElementById('app'));

来自 nav.js:

  render () {
    const sidebarContent = <SidebarContent />;

    const contentHeader = <span>
        {this.state.docked || <a onClick={this.menuButtonClick} href="javascript:void(0);" style={styles.contentHeaderMenuLink}>=</a>}
        <span>This title</span>
      </span>;

    const sidebarProps = {
      sidebar: sidebarContent,
      docked: this.state.docked,
      sidebarClassName: 'custom-sidebar-class',
      open: this.state.open,
      touch: this.state.touch,
      shadow: this.state.shadow,
      pullRight: this.state.pullRight,
      touchHandleWidth: this.state.touchHandleWidth,
      dragToggleDistance: this.state.dragToggleDistance,
      transitions: this.state.transitions,
      onSetOpen: this.onSetOpen,
    };

    return (
      <Sidebar {...sidebarProps} >
        <MaterialTitlePanel title={contentHeader}>
          {this.props.children}
        </MaterialTitlePanel>
      </Sidebar>
    );
  }

来自 sidebar_content.js:

const SidebarContent = (props) => {
  // const style = props.style ? {...styles.sidebar, ...props.style} : styles.sidebar;
  const style = props.style ? update(styles.sidebar, { $merge: props.style }) : styles.sidebar;

  // const links = [];

  const handle = () => {
    console.log('handle');
  };

  return (
    <MaterialTitlePanel title="Travel Guide Mobi" style={style}>
      <div style={styles.content}>
        <Link to="/pages/page1" >Page 1</Link>
        <div style={styles.divider} />
        <a key="key1" href="#" style={styles.sidebarLink}>Cities & Events</a>
        <a key="key2" href="#" style={styles.sidebarLink}>Set Travel Plans</a>
        <div style={styles.divider} />
        <a key="key3" href="#" style={styles.sidebarLink}>Edit Profile</a>
        <a key="key4" href="#" style={styles.sidebarLink}>Logout</a>
      </div>
    </MaterialTitlePanel>
  );
};

我想也许可以写一些类似 <Link to="/pages/page1" onClick={self.props.closeMenu}>Page 1</Link> 的东西但我不确定该怎么做？

Answer 1

你的想法是正确的。您可以在 Nav 组件中使用一个 bool 状态变量来决定侧边栏的可见性。

Nav.js

class Nav extends Component {
    constructor() {
        super()
        this.state = {showSidebar: true} // Initially we want it to be visible
    }

    toggleSidebar = () => {
        this.setState({showSidebar: !this.state.showSidebar})
    }

    render() {
        return <Sidebar 
                 toggleSidebar={this.toggleSidebar}
                 showSidebar={this.state.showSidebar}
               />
    }
}

Sidebar.js

class Sidebar extends Component {
    render() {
        const {toggleSidebar, showSidebar} = this.props
        return(
            <div>
                <Link to="/pages/page1" onClick={toggleSidebar}>Page 1</Link>
                {showSidebar?Code for open sidebar:Code for closed sidebar}
            </div>
        )
    }
}

您显然可以更改条件渲染部分。比如你想通过css处理，可以根据 的值动态改变className侧边栏可见 多变的。

希望这可以帮助 :)