on点击打开模块

Question

//Home.js
import React from "react";

function Header() {
return (
<div className="header__search">
<ImageSearchIcon onClick = { Upload_img }/>
</div>  
);
}
export default Header;

//Upload_img.js
import React, {useState} from "react";
import Modal from '@material-ui/core/Modal';

const Upload_img = (props) => {
const [open, setOpen] = React.useState(false);
const handleOpen = () => { 
setOpen(true);
};

const handleClose = () => {
setOpen(false);
};
return (
<div>
<Modal
open={open}
onClose={handleClose}
><h1>hello</h1></Modal>
</div>
)
}
export default Upload_img

我想使用模态作为模块但是我得到了这样的错误

错误:无效钩子调用。钩子只能在函数组件的内部调用。这可能是由于以下原因之一:

1. 你可能有不匹配的版本的React和渲染器(如React DOM)
2. 你可能违反了Hooks的规则
3. 你可能在同一个应用程序中有多个React副本

Answer 1

有多种方法可以解决这个问题。我认为最简单的方法是在父组件(Header)中移动你的模态状态。

//Home.js
import React from "react";

function Header() {
const [open, setOpen] = React.useState(false);
const handleOpen = () => { 
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div className="header__search">
<ImageSearchIcon onClick={handleOpen}/>
<Upload_img open={open} handleOpen={handleOpen} handleClose={handleClose}  />
</div>  
);
}
export default Header;

现在你的Upload_img组件将是一个无状态组件，它看起来像这样:

//Upload_img.js
import React from "react";
import Modal from '@material-ui/core/Modal';

const Upload_img = ({open, handleClose, handleOpen}) => {
return (
<div>
<Modal
open={open}
onClose={handleClose}
><h1>hello</h1></Modal>
</div>
)
}
export default Upload_img