React - 为什么我的链接在我的按钮下方呈现？

Question

这里我有当前标题渲染的图像。表头由一个 HeaderMenu 和 3 个链接组成。链接工作正常，但 HeaderMenu 导致链接低于它。 HeaderMenu 包含一个包装了 Button 和 Popper 的 div，充当下拉菜单。

我也不确定这种设计结构是否正确，但是对于样式，我有一个可以从中提取的 styles.js 文件。然后我将这些样式作为道具传递给较小的组件进行渲染。这就是为什么这里的组件有一个来自 index.js 中 useStyles 的 props 类。

Header.js

import { AppBar, Button, Link, Toolbar, Typography } from '@material-ui/core'
import HeaderMenu from './HeaderMenu.js'

const Header = (props) => {
  const { classes } = props

  return (
        <AppBar position="static" color="default" elevation={0} className={classes.appBar}>
        <Toolbar className={classes.toolbar}>
          <Typography variant="h6" color="inherit" noWrap className={classes.toolbarTitle}>
            Company name
          </Typography>
          <nav>
            <HeaderMenu classes={classes}/>
            <Link variant="button" color="textPrimary" href="#" className={classes.link}>
              Here
            </Link>
            <Link variant="button" color="textPrimary" href="#" className={classes.link}>
              Enterprise
            </Link>
            <Link variant="button" color="textPrimary" href="#" className={classes.link}>
              Support
            </Link>
          </nav>
          <Button href="#" color="primary" variant="outlined" className={classes.link}>
            Login
          </Button>
        </Toolbar>
      </AppBar>
  )
}

export default Header

HeaderMenu.js

import React from 'react'
import { Button, ClickAwayListener, Grow, Paper, Popper, MenuItem, MenuList } from '@material-ui/core'

const HeaderMenu = (props) => {
  const { classes } = props
  const [open, setOpen] = React.useState(false)
  const anchorRef = React.useRef(null)

  const handleToggle = () => {
    setOpen((prevOpen) => !prevOpen)
  }

  const handleClose = (event) => {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return
    }

    setOpen(false)
  }

  function handleListKeyDown (event) {
    if (event.key === 'Tab') {
      event.preventDefault()
      setOpen(false)
    }
  }

  // return focus to the button when we transitioned from !open -> open
  const prevOpen = React.useRef(open)
  React.useEffect(() => {
    if (prevOpen.current === true && open === false) {
      anchorRef.current.focus()
    }

    prevOpen.current = open
  }, [open])

  return (
    <div className={classes.link}>
        <Button
          ref={anchorRef}
          aria-controls={open ? 'menu-list-grow' : undefined}
          aria-haspopup="true"
          onClick={handleToggle}
        >
          Details
        </Button>
        <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
          {({ TransitionProps, placement }) => (
            <Grow
              {...TransitionProps}
              style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
            >
              <Paper>
                <ClickAwayListener onClickAway={handleClose}>
                  <MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
                    <MenuItem onClick={handleClose}>Profile</MenuItem>
                    <MenuItem onClick={handleClose}>My account</MenuItem>
                    <MenuItem onClick={handleClose}>Logout</MenuItem>
                  </MenuList>
                </ClickAwayListener>
              </Paper>
            </Grow>
          )}
        </Popper>
    </div>
  )
}

export default HeaderMenu

Answer 1

您应该将所有链接包装到 div 中，然后将其添加到您的 <nav></nav>

display: flex;
justify-content: space-evenly;
align-items: center;

这将允许它把所有东西都放在同一行。