0

我有一个侧边栏菜单，它使用状态来定义菜单中的项目，现在我想让菜单中的每个项目导航到特定的组件。

我的代码的概念与此类似：

https://codepen.io/mrhamburger/pen/XzjXGb?editors=0110

我试图操纵 MenuItem 函数，并添加 Link 标签。但是，我不知道如何在 MenuItem 函数中传递 menuItems 的状态，因为 menuItems 中的每个项目都应该导航到特定的组件。

 class MenuContainer extends React.Component {
  constructor(props) {
    super(props)

this.state = {
  activeItem: '',
  activeItemPosition: 0,
  activeItemColor: '',
  menuItems: [
    { text: 'Home' },
    { text: 'Gallery' },
    { text: 'About' },
    { text: 'Blog' },
    { text: 'Contact' },
  ],
}

this.handleClick = this.handleClick.bind(this)
  }




function MenuItem(props) {
 return (
     <div 
        className='menu-item'
        id={ props.item.text }
        onClick={ props.handleClick(props.item.text) }
      >
    // I tried to add Link here instead of the below
     { props.item.text.toUpperCase() }
    </div>
      )
                       }

我的问题是我想添加路由，所以当有人点击任何项目时，他们会转到另一个页面。我只是不知道如何使用标签传递不断变化的状态，因为在 MenuItem 函数中按下每个状态都应该转到另一个页面，我想可以在哪里进行更改。

请，我被困在这个阶段，如果你能帮助我，我将不胜感激。

谢谢！

4

1 回答 1

0

第一个问题是您在MenuItem. 首先更改内容onClick：

function MenuItem(props) {
  return (
    <div 
      className='menu-item'
      id={ props.item.text }
      onClick={ () => props.handleClick(props.item.text) }
    >
      { props.item.text.toUpperCase() }
    </div>
  )
}

下一个问题是，由于某种原因，handleClick 在此处理程序中返回了一个函数，并且还尝试引用e实际上并未传递给handleClick(). 更改handleClick()为以下内容：

handleClick(activeItem) {    
  this.setState({
    activeItem,
    activeItemPosition: document.getElementById(activeItem).offsetTop,
     activeItemColor: window.gtComputedStyle(document.getElementById(activeItem)).getPropertyValue('background-color'),
  })
}

进行上述更改会在单击时激活状态/样式转换。如果您确实需要e.preventDefault()，您也可以更新MenuItem以通过e：

onClick={ (e) => props.handleClick(e, props.item.text) }

然后handleClick()将有一个更改的签名：

handleClick(e, activeItem) {
   e.preventDefault();
   // ... rest of function
}

希望这会有所帮助！

于 2019-08-27T19:26:40.043 回答