我有下面的函数调用显示一个模态对话框点击编辑按钮。如何从函数showModal渲染功能组件UpdateModal
?
下面是函数:
const showModal = (user: IUser) => {
setShowUpdateModal(true);
return (
<>
<div>Hello</div>
<UpdateModal
showUpdateModal={showUpdateModal}
setShowUpdateModal={
(bool: boolean | ((prevState: boolean) => boolean)) =>
setShowUpdateModal(bool)
}
/>
</>
);
}
更新模式:
const UpdateModal: FC<updateModalProps> = ({
setShowUpdateModal,
showUpdateModal,
user
}) => {
console.log("showUpdateModal....", showUpdateModal);
return (
<Modal showUpdateModal={showUpdateModal}>
<Modal.Dialog>
<Modal.Header closeButton onClick={() => setShowUpdateModal(false)}>
<Modal.Title className={`${styles.createText}`}>
Create User Form
</Modal.Title>
</Modal.Header>
<Modal.Body>
<UpdateUser user={user} setShowUpdateModal={setShowUpdateModal} />
</Modal.Body>
</Modal.Dialog>
</Modal>
);
}
export default UpdateModal;
2条答案
按热度按时间mjqavswn1#
问题是,你不能从回调函数返回JSX,并期望React知道它需要在某处呈现它。
showModal
回调可以更新showUpdateModal
状态,父组件将使用更新后的状态值重新呈现。从这里,您只需将模态渲染为父组件的渲染返回的一部分。更新
showUpdateModal
状态以保存对特定用户的引用或空值。将其传递给模态的user
prop。所有模态关闭操作都应该将showUpdateModal
状态设置回null
以关闭模型。示例:
ctzwtxfj2#
我认为您需要有条件地在
UserContent
的返回值中呈现UpdateModal
组件。从概念上讲,这是最常见的流程:此代码将在单击
Pen
时触发重新渲染,因为状态改变。然后,因为showUpdateModal
是true
,UpdateModal
将被渲染。然而,这将要求您重新组织代码。