Question

我想在页面的顶部添加我的徽标，但是我真的做不到，这是代码

   import React from "react";
  import classNames from "classnames";
  import PropTypes from "prop-types";
 import withStyles from "@material-ui/core/styles/withStyles";
 import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import IconButton from "@material-ui/core/IconButton";
 import Button from "@material-ui/core/Button";
import Hidden from "@material-ui/core/Hidden";
import Drawer from "@material-ui/core/Drawer";
import Menu from "@material-ui/icons/Menu";
 import headerStyle from "../../assets/jss/material-kit-react/components/headerStyle.jsx";

 class Header extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
  mobileOpen: false
 };
 this.handleDrawerToggle = this.handleDrawerToggle.bind(this);
 this.headerColorChange = this.headerColorChange.bind(this);
}
  handleDrawerToggle() {
  this.setState({ mobileOpen: !this.state.mobileOpen });
}
 componentDidMount() {
 if (this.props.changeColorOnScroll) {
  window.addEventListener("scroll", this.headerColorChange);
}
 }
 headerColorChange() {
const { classes, color, changeColorOnScroll } = this.props;
const windowsScrollTop = window.pageYOffset;
if (windowsScrollTop > changeColorOnScroll.height) {
  document.body
    .getElementsByTagName("header")[0]
    .classList.remove(classes[color]);
  document.body
    .getElementsByTagName("header")[0]
    .classList.add(classes[changeColorOnScroll.color]);
 } else {
  document.body
    .getElementsByTagName("header")[0]
    .classList.add(classes[color]);
  document.body
    .getElementsByTagName("header")[0]
    .classList.remove(classes[changeColorOnScroll.color]);
 }
}
componentWillUnmount() {
if (this.props.changeColorOnScroll) {
  window.removeEventListener("scroll", this.headerColorChange);
 }
}
render() {
const {
  classes,
  color,
  rightLinks,
  leftLinks,
  brand,
  fixed,
  absolute
 } = this.props;
 const appBarClasses = classNames({
  [classes.appBar]: true,
  [classes[color]]: color,
  [classes.absolute]: absolute,
  [classes.fixed]: fixed
 });
 const brandComponent = <Button className={classes.title}>{brand}</Button>;
 return (
  <AppBar className={appBarClasses}>
    <Toolbar className={classes.container}>
      {leftLinks !== undefined ? brandComponent : null}
      <div className={classes.flex}>
        {leftLinks !== undefined ? (
          <Hidden smDown implementation="css">
            {leftLinks}
          </Hidden>
        ) : (
          brandComponent
        )}
      </div>
      <Hidden smDown implementation="css">
        {rightLinks}
      </Hidden>
      <Hidden mdUp>
        <IconButton
          color="inherit"
          aria-label="open drawer"
          onClick={this.handleDrawerToggle}
        >
          <Menu />
        </IconButton>
      </Hidden>
    </Toolbar>
    <Hidden mdUp implementation="css">
      <Drawer
        variant="temporary"
        anchor={"right"}
        open={this.state.mobileOpen}
        classes={{
          paper: classes.drawerPaper
        }}
        onClose={this.handleDrawerToggle}
      >
        <div className={classes.appResponsive}>
          {leftLinks}
          {rightLinks}
        </div>
      </Drawer>
    </Hidden>
  </AppBar>
 );
}
}

Header.defaultProp = {
color: "white"
};

 Header.propTypes = {
classes: PropTypes.object.isRequired,
color: PropTypes.oneOf([
"primary",
"info",
"success",
"warning",
"danger",
"transparent",
"white",
"rose",
"dark"
]),
rightLinks: PropTypes.node,
leftLinks: PropTypes.node,
brand: PropTypes.string,
 fixed: PropTypes.bool,
absolute: PropTypes.bool,

changeColorOnScroll: PropTypes.shape({
height: PropTypes.number.isRequired,
color: PropTypes.oneOf([
  "primary",
  "info",
  "success",
  "warning",
  "danger",
  "transparent",
  "white",
  "rose",
  "dark"
 ]).isRequired
})
 };

 export default withStyles(headerStyle)(Header);

当我调用标题时，它会像这样

     <Header
      color="transparent"
      routes={dashboardRoutes}
      brand="my page"
      rightLinks={<HeaderLinks />}
      fixed
      changeColorOnScroll={{
        height: 400,
        color: "white"
      }}
      {...rest}
    />

我尝试了标头部分中的一个组件，但由于它很大且无法正确调整其大小，它确实弄乱了我的标头，有什么想法如何将徽标连接到此标头而不弄乱我的宽度/高度尺寸吗？

Answer 1

您brandComponent在if内，道具leftLinks未定义，因为您没有将其传递给<Header />，因此您的brandComponent将不会呈现。 / p>

尝试将leftLink属性传递到Header，看看是否将渲染brandComponent

<Header
  color="transparent"
  routes={dashboardRoutes}
  brand="my page"
  rightLinks={<HeaderLinks />}
  leftLinks={LEFTLINKS_HERE}
  fixed
  changeColorOnScroll={{
    height: 400,
    color: "white"
  }}
  {...rest}
/>

反应材料套件不能在标头上添加徽标

1 个答案: