Question

我有一个Material-ui菜单，其中包含以下内容：

SELECT *
FROM `user`
WHERE (birth_date + INTERVAL (YEAR(NOW())-YEAR(birth_date) + IF(DAYOFYEAR(NOW()) >= DAYOFYEAR(birth_date), 1, 0)) YEAR) > CURDATE()
ORDER BY DATE_FORMAT(birth_date, '%m-%d')
LIMIT 5

它在屏幕左侧的一行中显示菜单项。我希望<span> <Link to="/issues"> <Button style={isActive(history, "/issues")}>Issues </Button> </Link> <Link to="/users"> <Button style={isActive(history, "/users")}>Users </Button> </Link> <Link to="/signup"> <Button style={isActive(history, "/signup")}>Create User </Button> </Link> <Link to={"/user/" + auth.isAuthenticated().user._id}> <Button style={isActive(history, "/user/" + auth.isAuthenticated().user._id)}>My Profile</Button> </Link> <Button color="inherit" onClick={() => { auth.signout(() => history.push('/')) }}>Sign out</Button> </span>和My Profile按钮出现在屏幕的右侧。我该怎么做？

Answer 1

即使这与react或material-ui无关，也可以使用flex box：

<div style={{ display: 'flex', justifyContent: 'space-between' }}>

  <div>

    <Link to="/issues">
      <Button style={isActive(history, "/issues")}>Issues
      </Button>
    </Link>
    <Link to="/users">
      <Button style={isActive(history, "/users")}>Users
      </Button>
    </Link>
    <Link to="/signup">
      <Button style={isActive(history, "/signup")}>Create User
      </Button>
    </Link>

  </div>

  <div>

    <Link to={"/user/" + auth.isAuthenticated().user._id}>
      <Button style={isActive(history, "/user/" + auth.isAuthenticated().user._id)}>My Profile</Button>
    </Link>
    <Button color="inherit" onClick={() => {
      auth.signout(() => history.push('/'))
    }}>Sign out</Button>

  </div>

</div>

Answer 2

也许有更好的方法可以做到这一点，但这对我有用：

var a = "sample data"
const returnDataOfLet = (a) => {
switch(typeof a){
    case "string": 
      let b = a.split(" ") // will throw an error change let to var it will work
      return b 
}
}

console.log(returnDataOfLet(a))

Answer 3

使用Ref来触发按钮来计算菜单的大小和位置，然后相应地放置菜单，我取得了一些成功。这是代码：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  menuButton: {
    marginRight: theme.spacing(2)
  },
  title: {
    flexGrow: 1
  },
  menu: {
    position: "absolute"
  }
}));

function getOffset(el) {
  if (!el.current) return { top: 0, left: 0 };
  const rect = el.current.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX + el.current.offsetWidth,
    top: rect.top + window.scrollY + el.current.offsetHeight
  };
}

export default function ButtonAppBar() {
  const classes = useStyles();
  const [menuOpened, setMenuOpened] = React.useState(false);
  let menuButtonRef = React.useRef(null);

  function openMenu() {
    setMenuOpened(true);
  }

  function closeMenu() {
    setMenuOpened(false);
  }

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            aria-label="menu"
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            News
          </Typography>
          <Button
            color="inherit"
            onClick={event => openMenu(event)}
            ref={menuButtonRef}
          >
            email@example.com &#9660;
          </Button>
        </Toolbar>
      </AppBar>
      <Menu
        open={menuOpened}
        keepMounted
        onClick={closeMenu}
        id="user-menu"
        anchorReference="anchorPosition"
        anchorPosition={getOffset(menuButtonRef)}
        className={classes.menu}
      >
        <MenuItem onClick={closeMenu}>Sign Out</MenuItem>
        <MenuItem onClick={closeMenu}>More items here...</MenuItem>
      </Menu>
    </div>
  );
}

使用material-ui右对齐菜单选项

3 个答案: