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.js

Sub MainList()

    'Updateby20150706
    Set folder = Application.FileDialog(msoFileDialogFolderPicker)
    If folder.Show <> -1 Then Exit Sub
    xDir = folder.SelectedItems(1)
    Call ListFilesInFolder(xDir, True)

End Sub

Sub ListFilesInFolder(ByVal xFolderName As String, ByVal xIsSubfolders As Boolean)

    Dim xFileSystemObject As Object
    Dim xFolder As Object
    Dim xSubFolder As Object
    Dim xFile As Object
    Dim rowIndex As Long
    Set xFileSystemObject = CreateObject("Scripting.FileSystemObject")
    Set xFolder = xFileSystemObject.GetFolder(xFolderName)
    rowIndex = Application.ActiveSheet.Range("A65536").End(xlUp).Row + 1
    For Each xFile In xFolder.Files
      Application.ActiveSheet.Cells(rowIndex, 1).Formula = xFile.Name
      rowIndex = rowIndex + 1
    Next xFile
    If xIsSubfolders Then
      For Each xSubFolder In xFolder.SubFolders
        ListFilesInFolder xSubFolder.path, True
      Next xSubFolder
    End If
    Set xFile = Nothing
    Set xFolder = Nothing
    Set xFileSystemObject = Nothing

End Sub

Function GetFileOwner(ByVal xPath As String, ByVal xName As String)

    Dim xFolder As Object
    Dim xFolderItem As Object
    Dim xShell As Object
    xName = StrConv(xName, vbUnicode)
    xPath = StrConv(xPath, vbUnicode)
    Set xShell = CreateObject("Shell.Application")
    Set xFolder = xShell.Namespace(StrConv(xPath, vbFromUnicode))
    If Not xFolder Is Nothing Then
      Set xFolderItem = xFolder.ParseName(StrConv(xName, vbFromUnicode))
    End If
    If Not xFolderItem Is Nothing Then
      GetFileOwner = xFolder.GetDetailsOf(xFolderItem, 8)
    Else
      GetFileOwner = ""
    End If
    Set xShell = Nothing
    Set xFolder = Nothing
    Set xFolderItem = Nothing

End Function

<强> Sidebar.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}
               />
    }
}

您显然可以更改条件渲染部分。例如，如果您想通过css处理它，可以根据 sidebarVisible 变量的值动态更改className。

希望这会有所帮助：）

Answer 2

我建议使用路由器状态。设计showSidebar链接，如：

<Link to="/pages/page1" state={{ sidebarOpen: true }}>Page 1</Link>

在导航组件中，从路由器状态读取sidebarOpen值。

<强>为什么吗

现在，您可以选择在应用程序的任何位置打开侧边栏，而无需任何额外的道具传递。只需设置链接状态即可。
任何其他点击都会关闭我认为你想要的边栏。

事实上，如果没有某种事件总线（例如：助焊剂动作），我根本不会推荐你在原帖中提出的建议，因为你最终可能会得到一大盘意大利面。

Answer 3

在sidebar_content.js中

： <Link style={styles.sidebarLink} to="/cities" onClick={this.props.onClickHandle}>Cities & Events</Link> 在nav.js中：

  render () {
    const sidebarContent = <SidebarContent onClickHandle={this.onClickHandle} />;
...

再次在nav.js中：

export default React.createClass({
     onClickHandle () {
        console.log('onClickHandle');
        this.setState({ open: false });
      },

单击任何链接时如何关闭反应边栏？

3 个答案: