Javascript 组件每次渲染时调用函数10次
我正在尝试测试我的一个组件。它是Material UI中的一个Javascript 组件每次渲染时调用函数10次,javascript,reactjs,enzyme,Javascript,Reactjs,Enzyme,我正在尝试测试我的一个组件。它是Material UI中的一个NavigationDrawer，并且它有一个名为toggleDrawer（）的道具，该道具可以准确地执行该操作并切换抽屉 每次组件呈现时，它都会在1ms-2ms的范围内调用toggleDrawer（）函数10次。我不明白它为什么这样做，如果可能的话，我想解决它 这是一个组件： import React from "react"; import PropTypes from "prop-types"; import { withSty
NavigationDrawertoggleDrawer（）toggleDrawer（）import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import { styles } from "../styles/NavigationDrawerStyles";
import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import Collapse from "@material-ui/core/Collapse";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";
import ViewListIcon from "@material-ui/icons/ViewListOutlined";
import CreateOutlinedIcon from "@material-ui/icons/CreateOutlined";
import ShuffleIcon from "@material-ui/icons/Shuffle";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import HomeIcon from "@material-ui/icons/HomeOutlined";
import ContactsIcon from "@material-ui/icons/ContactsOutlined";
import BusinessIcon from "@material-ui/icons/BusinessOutlined";
import IconButton from "@material-ui/core/IconButton";
import DescriptionIcon from "@material-ui/icons/DescriptionOutlined";
import DashboardOutlinedIcon from "@material-ui/icons/DashboardOutlined";
import BookOutlinedIcon from "@material-ui/icons/BookOutlined";
import Divider from "@material-ui/core/Divider";
import { Link } from "react-router-dom";
class NavigationDrawer extends React.Component {
constructor(props) {
super(props);
this.state = {
postsOpen: false,
policiesOpen: false
};
}
handlePostsClick = () => {
this.setState(state => ({ postsOpen: !state.postsOpen }));
};
handlePoliciesClick = () => {
this.setState(state => ({ policiesOpen: !state.policiesOpen }));
};
render() {
const { classes, toggleDrawer, open } = this.props;
const { postsOpen, policiesOpen } = this.state;
return (
<React.Fragment>
<Drawer
open={open}
onClose={toggleDrawer(false)}
className={classes.drawerPaper}
>
<div
tabIndex={0}
role="button"
//onClick={toggleDrawer(false)}
//onKeyDown={toggleDrawer(false)}
className={classes.list}
>
<div className={classes.drawerHeader}>
<IconButton
className={classes.CloseIcon}
onClick={toggleDrawer(false)}
>
<ChevronLeftIcon />
</IconButton>
</div>
<Divider />
<List>
<ListItem
button
component={Link}
to="/"
onClick={toggleDrawer(false)}
>
<ListItemIcon>
<HomeIcon />
</ListItemIcon>
<ListItemText inset primary="Home" />
</ListItem>
<ListItem button onClick={this.handlePostsClick}>
<ListItemIcon>
<DashboardOutlinedIcon />
</ListItemIcon>
<ListItemText inset primary="Posts" />
{postsOpen ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={postsOpen} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItem
button
className={classes.nested}
id="posts-nested-dropdown"
component={Link}
to="/posts/"
onClick={toggleDrawer(false)}
>
<ListItemIcon>
<ViewListIcon />
</ListItemIcon>
<ListItemText inset primary="Recent Posts" />
</ListItem>
<ListItem
button
className={classes.nested}
component={Link}
to="/posts/create/"
onClick={toggleDrawer(false)}
>
<ListItemIcon>
<CreateOutlinedIcon />
</ListItemIcon>
<ListItemText inset primary="Create a Post" />
</ListItem>
<ListItem button className={classes.nested}>
<ListItemIcon>
<ShuffleIcon />
</ListItemIcon>
<ListItemText inset primary="Random Post" />
</ListItem>
</List>
</Collapse>
<ListItem
button
component={Link}
to="/about"
onClick={toggleDrawer(false)}
>
<ListItemIcon>
<BusinessIcon />
</ListItemIcon>
<ListItemText inset primary="About" />
</ListItem>
<ListItem
button
component={Link}
to="/contact"
onClick={toggleDrawer(false)}
>
<ListItemIcon>
<ContactsIcon />
</ListItemIcon>
<ListItemText inset primary="Contact" />
</ListItem>
<ListItem
button
component="a"
href="http://docs.chbresser.com"
onClick={toggleDrawer(false)}
>
<ListItemIcon>
<DescriptionIcon />
</ListItemIcon>
<ListItemText inset primary="Docs" />
</ListItem>
<Divider />
<ListItem button onClick={this.handlePoliciesClick}>
<ListItemIcon>
<BookOutlinedIcon />
</ListItemIcon>
<ListItemText inset primary="Important Policies" />
{policiesOpen ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={policiesOpen} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItem
button
className={classes.nested}
component={Link}
to="/privacy/"
onClick={toggleDrawer(false)}
>
<ListItemIcon>
<ViewListIcon />
</ListItemIcon>
<ListItemText inset primary="Privacy Policy" />
</ListItem>
<ListItem
button
className={classes.nested}
component={Link}
to="/terms/"
onClick={toggleDrawer(false)}
>
<ListItemIcon>
<ViewListIcon />
</ListItemIcon>
<ListItemText inset primary="Terms and Conditions" />
</ListItem>
</List>
</Collapse>
</List>
<div className={classes.drawerFooter}>
<i
className={`fas fa-hand-holding-heart ${classes.footerIcon}`}
/>{" "}
Made with love by the TechHorizon team.
<br />
</div>
</div>
</Drawer>
</React.Fragment>
);
}
}
NavigationDrawer.propTypes = {
classes: PropTypes.object.isRequired,
toggleDrawer: PropTypes.func.isRequired
};
export default withStyles(styles)(NavigationDrawer);
从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core/styles”导入{withStyles}”；
从“./styles/NavigationDrawerStyles”导入{styles}；
从“@物料界面/核心/抽屉”导入抽屉；
从“@material ui/core/List”导入列表；
从“@material ui/core/ListItem”导入ListItem；
从“@material ui/core/ListItemText”导入ListItemText；
从“@material ui/core/ListItemIcon”导入ListItemIcon；
从“@material ui/core/Collapse”导入折叠；
从“@material ui/icons/ExpandLess”导入ExpandLess；
从“@material ui/icons/ExpandMore”导入ExpandMore；
从“@material ui/icons/ViewListIcon”导入ViewListIcon；
从“@material ui/icons/CreateOutlinedIcon”导入CreateOutlinedIcon；
从“@material ui/icons/Shuffle”导入ShuffleIcon；
从“@material ui/icons/ChevronLeft”导入ChevronLeftIcon；
从“@material ui/icons/HomeOutlined”导入HomeIcon；
从“@material ui/icons/contactsoutline”导入ContactsIcon；
从“@material ui/icons/BusinessOutlined”导入BusinessIcon；
从“@material ui/core/IconButton”导入图标按钮；
从“@material ui/icons/DescriptionOutlined”导入描述符；
从“@material ui/icons/DashboardOutlinedIcon”导入DashboardOutlinedIcon；
从“@material ui/icons/BookOutlined”导入BookOutlinedIcon；
从“@material ui/core/Divider”导入分隔器；
从“react router dom”导入{Link}；
类NavigationDrawer扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
postsOpen:错，
警察开放：假
};
}
handlePostsClick=（）=>{
this.setState（state=>（{postsOpen:！state.postsOpen}））；
};
handlePoliciesClick=（）=>{
this.setState（state=>（{policiesOpen:！state.policiesOpen}））；
};
render（）{
const{classes，toggleDrawer，open}=this.props；
const{postsOpen，policiesOpen}=this.state；
返回(
{postsOpen？：}
{警察开放？：}
{" "}
TechHorizon团队用爱打造。
);
}
}
NavigationDrawer.propTypes={
类：PropTypes.object.isRequired，
toggleDrawer:PropTypes.func.isRequired
};
导出默认样式（样式）（NavigationDrawer）；
import { createShallow } from "@material-ui/core/test-utils";
import React from "react";
import NavigationDrawer from "../components/NavigationDrawer";
import "jest-dom/extend-expect";
const toggleDrawer = jest.fn();
describe("<NavigationDrawer />", () => {
let shallow;
beforeEach(() => {
shallow = createShallow({ dive: true });
});
it("renders a Drawer", () => {
const page = shallow(<NavigationDrawer toggleDrawer={toggleDrawer} />);
expect(toggleDrawer.mock.calls.length).toEqual(0);
expect(page.find("WithStyles(Drawer)").length).toEqual(1);
});
it("renders the main List and 2 dropdown Lists", () => {
const page = shallow(<NavigationDrawer toggleDrawer={toggleDrawer} />);
expect(page.find("WithStyles(List)").length).toEqual(3);
});
it("opens posts menu on click", () => {
const page = shallow(<NavigationDrawer toggleDrawer={toggleDrawer} />);
expect(toggleDrawer.mock.calls.length).toEqual(1);
});
});
从“@material ui/core/test utils”导入{createshall}；
从“React”导入React；
从“./组件/NavigationDrawer”导入NavigationDrawer；
导入“jest dom/extend expect”；
const-toggleDrawer=jest.fn（）；
描述（“，（）=>{
让浅；
在每个之前（（）=>{
shallow=createShallow（{dive:true}）；
});
它（“呈现抽屉”，（）=>{
常量页=浅（）；
expect（toggleDrawer.mock.calls.length）.toEqual（0）；
expect（页面查找（“带样式（抽屉）”）.length.toEqual（1）；
});
它（“呈现主列表和2个下拉列表”，（）=>{
常量页=浅（）；
expect（page.find（“WithStyles（List）”）.length.toEqual（3）；
});
它（“单击后打开帖子菜单”，（）=>{
常量页=浅（）；
expect（toggleDrawer.mock.calls.length）.toEqual（1）；
});
});
toggleDrawer（）toggleDrawer（false）列表项的prop
如果希望在触发onClick
事件时使用参数false
调用toggleDrawer（）
，则应将其封装在如下函数中：
onClick={() => toggleDrawer(false)}
onClick={toggleDrawer.bind(this, false)}
或者，您可以这样使用：
onClick={() => toggleDrawer(false)}
onClick={toggleDrawer.bind(this, false)}
这两个选项都列为推荐选项
此行为源于您将如何在纯HTML中附加事件处理程序：
HTML:
JSX:
这一行是你的问题（而且