问题描述
试图从外部调用模态函数,但不可能。使用静态方法和属性通过类组件实现,但 this
在那里不起作用。观察者提出了一些问题,最终登陆无状态组件。我们如何才能最好地完成这项工作?
//Inside
import Modal from './modal';
// Not working
<Button onClick={Modal.showModal}
<Modal />
//Outside
export const Modal = () => {
const [visible,setVisible] = useState(false);
const showModal = () => {
setVisible(true);
}
return(
<Dialog visible={visible}>Hello Test</h1>
)
}
解决方法
您可以在父组件中声明 setVisible:
const [visible,setVisible] = useState(true);
然后将 set 函数传递给 Modal:
<Modal visible={visible} setVisible={setVisible} />
设置从外部可见:
<button onClick={() => setVisible(!visible)}>Click</button>
示例:https://codesandbox.io/s/competent-bassi-x3dqd?file=/src/App.js:267-325
,您将需要 "lift the state up" 到一个组件,该组件将状态和状态处理程序传递给他的孩子,或者使用带有 redux
或 context
的一些全局状态。
示例:
<App>
:
import Modal from "./modal";
import { useState } from "react";
const [visible,setVisible] = useState(false);
const showModal = () => {
setVisible(true);
};
return (
<>
<Button onClick={showModal}> Hide Modal </Button>
<Modal visible={visible} />
</>
);
<Modal>
:
export default const Modal = ({ visible }) => {
return (
<Dialog visible={visible}>
<h1>Hello Test</h1>
</Dialog>
);
};
此外,仅使用 export
关键字,您只能从模块导入单个导出,因此您不能使用 默认导入 语法 import Modal from "..."
并且您将被要求导入 - import { Modal } from '...'
我在这里设法解决了 usingEffect,但不确定这是否适合我的实现。我正在尝试更新已安装组件的状态。
useEffect(() => {
if (props.visible) {
showModal();
}
},[props.visible]);
并使用回调道具处理 resetState