Javascript 如何在我的应用程序中为React添加从材质UI返回顶部按钮的AppBar？

在Material UI的文档中，我发现了以下代码：

从“React”导入React； 从“道具类型”导入道具类型； 从“@material ui/core/AppBar”导入AppBar； 从“@material ui/core/Toolbar”导入工具栏； 从“@material ui/core/Typography”导入排版； 从'@material ui/styles'导入{makeStyles}； 从“@material ui/core/CssBaseline”导入CssBaseline； 从“@material ui/core/UseCrollTrigger”导入UseCrollTrigger； 从“@material ui/core/Box”导入框； 从“@material ui/core/Container”导入容器； 从“@material ui/core/Fab”导入晶圆厂； 从“@material ui/icons/KeyboardArrowUp”导入键盘箭头图标； 从“@material ui/core/Zoom”导入缩放； const useStyles=makestylesTime=>{ 根目录：{ 位置：'固定'， 底部：theme.spacing2， 右：theme.spacing2， }, }; 函数滚动到子对象{ 常量类=使用样式； 常量触发器=使用滚动触发器{ 目标：窗口？窗口：未定义， 是的， 阈值：100 }; const handleClick=事件=>{ const-anchor=event.target.ownerDocument | | document.querySelector'back-to-top-anchor'； 如果锚{ scrollIntoView{behavior:'smooth'，block:'center'}； } }; 回来 {儿童} ; } 导出默认函数BackToTopchildren{ 回来 滚动查看按钮 {[…新阵列100] 地图 =>`Cras mattis concertetur purus坐在发酵罐里。 我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。 莫里·利奥·里索斯，圣殿之门，爱神之门的前庭。 这是一个伟大的共产主义者， .join'\n'} ; } 有人说，这个代码是顶部栏，它会拉回到顶部按钮。但我不明白作为孩子我应该传递什么到BackToTop函数。有人能帮我吗？

---

P.S代码还包括存储在Box元素中的内容，它只是用于测试。如果我正确理解children参数的用途，我应该能够使BackToTop函数独立于任何参数。

您所指的文档部分在这里：。该演示的代码沙盒版本如下：

与文档中的演示相比，您问题中的代码有一些有问题的更改。令人困惑的是，您在BackToTop参数和ScrollTop参数的两个位置将道具重命名为children。文档中的代码中需要注意的一点是，传递给BackToTop的道具从未被使用过——它们是通过ScrollTop传递给ScrollTop的，但是ScrollTop也不使用这些道具中的任何一个，而且由于index.js没有将任何道具传递给BackToTop，因此它是一个空对象，因此没有多少可以使用它

下面是演示的一个稍微简化的版本，用于删除未使用的道具：

import React from "react";
import PropTypes from "prop-types";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import useScrollTrigger from "@material-ui/core/useScrollTrigger";
import Box from "@material-ui/core/Box";
import Container from "@material-ui/core/Container";
import Fab from "@material-ui/core/Fab";
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
import Zoom from "@material-ui/core/Zoom";

const useStyles = makeStyles(theme => ({
  root: {
    position: "fixed",
    bottom: theme.spacing(2),
    right: theme.spacing(2)
  }
}));

function ScrollTop(props) {
  const { children } = props;
  const classes = useStyles();
  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 100
  });

  const handleClick = event => {
    const anchor = (event.target.ownerDocument || document).querySelector(
      "#back-to-top-anchor"
    );

    if (anchor) {
      anchor.scrollIntoView({ behavior: "smooth", block: "center" });
    }
  };

  return (
    <Zoom in={trigger}>
      <div onClick={handleClick} role="presentation" className={classes.root}>
        {children}
      </div>
    </Zoom>
  );
}

ScrollTop.propTypes = {
  children: PropTypes.element.isRequired
};

export default function BackToTop() {
  return (
    <React.Fragment>
      <CssBaseline />
      <AppBar>
        <Toolbar>
          <Typography variant="h6">Scroll to see button</Typography>
        </Toolbar>
      </AppBar>
      <Toolbar id="back-to-top-anchor" />
      <Container>
        <Box my={2}>
          {[...new Array(25)]
            .map(
              () => `Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`
            )
            .join("\n")}
        </Box>
      </Container>
      <ScrollTop>
        <Fab color="secondary" size="small" aria-label="scroll back to top">
          <KeyboardArrowUpIcon />
        </Fab>
      </ScrollTop>
    </React.Fragment>
  );
}

这是将一个浮动操作按钮传递给ScrollTop，作为用户滚动时要显示的内容，以及当单击时将导致页面滚动回顶部的内容

---

您问题中的代码包含ScrollTopchildren，而不是ScrollTop{children}，也就是说，您调用的是整个道具对象的子对象，而不是从中取出子道具。

您所指的文档部分在这里：。该演示的代码沙盒版本如下：

与文档中的演示相比，您问题中的代码有一些有问题的更改。令人困惑的是，您在BackToTop参数和ScrollTop参数的两个位置将道具重命名为children。文档中的代码中需要注意的一点是，传递给BackToTop的道具从未被使用过——它们是通过ScrollTop传递给ScrollTop的，但是ScrollTop也不使用这些道具中的任何一个，而且由于index.js没有将任何道具传递给BackToTop，因此它是一个空对象，因此没有多少可以使用它

下面是演示的一个稍微简化的版本，用于删除未使用的道具：

import React from "react";
import PropTypes from "prop-types";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import useScrollTrigger from "@material-ui/core/useScrollTrigger";
import Box from "@material-ui/core/Box";
import Container from "@material-ui/core/Container";
import Fab from "@material-ui/core/Fab";
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
import Zoom from "@material-ui/core/Zoom";

const useStyles = makeStyles(theme => ({
  root: {
    position: "fixed",
    bottom: theme.spacing(2),
    right: theme.spacing(2)
  }
}));

function ScrollTop(props) {
  const { children } = props;
  const classes = useStyles();
  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 100
  });

  const handleClick = event => {
    const anchor = (event.target.ownerDocument || document).querySelector(
      "#back-to-top-anchor"
    );

    if (anchor) {
      anchor.scrollIntoView({ behavior: "smooth", block: "center" });
    }
  };

  return (
    <Zoom in={trigger}>
      <div onClick={handleClick} role="presentation" className={classes.root}>
        {children}
      </div>
    </Zoom>
  );
}

ScrollTop.propTypes = {
  children: PropTypes.element.isRequired
};

export default function BackToTop() {
  return (
    <React.Fragment>
      <CssBaseline />
      <AppBar>
        <Toolbar>
          <Typography variant="h6">Scroll to see button</Typography>
        </Toolbar>
      </AppBar>
      <Toolbar id="back-to-top-anchor" />
      <Container>
        <Box my={2}>
          {[...new Array(25)]
            .map(
              () => `Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`
            )
            .join("\n")}
        </Box>
      </Container>
      <ScrollTop>
        <Fab color="secondary" size="small" aria-label="scroll back to top">
          <KeyboardArrowUpIcon />
        </Fab>
      </ScrollTop>
    </React.Fragment>
  );
}

这是将一个浮动操作按钮传递给ScrollTop，作为用户滚动时要显示的内容，以及当单击时将导致页面滚动回顶部的内容

您问题中的代码包含ScrollTopchildren，而不是ScrollTop{children}，也就是说，您正在调用整个props对象children，而不是从中取出children prop