在Material UI的文档中,我找到了这段代码。
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/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(children) {
const classes = useStyles();
const trigger = useScrollTrigger({
target: window ? window() : undefined,
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="presetation" className={classes.root}>
{children}
</div>
</Zoom>);
}
export default function BackToTop(children) {
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(100)]
.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 {...children}>
<Fab color="secondary" size="small" aria-label="scroll back to top">
<KeyboardArrowUpIcon />
</Fab>
</ScrollTop>
</React.Fragment>
);
}
有人说这段代码是顶栏,它将画出 Back to top
按钮。但我不明白,我应该通过什么作为 children
到 BackToTop
功能。谁能帮帮我?P.S 代码还包括内容,这些内容存储在 Box
元素,它只是用于测试。如果我理解 children
参数正确,我应该有能力让 BackToTop
函数,独立于任何参数。
你所提到的文档部分在这里。https:/material-ui.comcomponentsapp-bar#back-to-top。. 该演示的代码沙盒版本在这里。https:/codesandbox.iosr59zg?file=demo.js。.
你问题中的代码与文档中的demo相比,有一些问题变化。令人困惑的是,你将 props
到 children
有几处(BackToTop
争论和 ScrollTop
参数)。) 在文档的代码中需要注意的一点是,传递给 BackToTop
从未使用 -- -- 它们被传递给 ScrollTop
通过 <ScrollTop {...props}>
但 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>
);
}
这个... children
被用于 ScrollTop
是JSX中的子元素。ScrollTop
元素。在这种情况下,就是。
<Fab color="secondary" size="small" aria-label="scroll back to top">
<KeyboardArrowUpIcon />
</Fab>
这是把一个浮动动作按钮传给了 ScrollTop
作为用户滚动时要显示的东西,以及点击后会使页面回滚到顶部的东西。
您问题中的代码有 ScrollTop(children)
不过与其说 ScrollTop({children})
-- 也就是说,你把整个的 props
对象 children
而不是得到 children
撑出来的。