typescript 如何从函数中调用React组件函数元素?

y1aodyip  于 2023-06-24  发布在  TypeScript
关注(0)|答案(2)|浏览(117)

我有下面的函数调用显示一个模态对话框点击编辑按钮。如何从函数showModal渲染功能组件UpdateModal
下面是函数:

  1. const showModal = (user: IUser) => {
  2. setShowUpdateModal(true);
  3. return (
  4. <>
  5. <div>Hello</div>
  6. <UpdateModal
  7. showUpdateModal={showUpdateModal}
  8. setShowUpdateModal={
  9. (bool: boolean | ((prevState: boolean) => boolean)) =>
  10. setShowUpdateModal(bool)
  11. }
  12. />
  13. </>
  14. );
  15. }

更新模式:

  1. const UpdateModal: FC<updateModalProps> = ({
  2. setShowUpdateModal,
  3. showUpdateModal,
  4. user
  5. }) => {
  6. console.log("showUpdateModal....", showUpdateModal);
  7. return (
  8. <Modal showUpdateModal={showUpdateModal}>
  9. <Modal.Dialog>
  10. <Modal.Header closeButton onClick={() => setShowUpdateModal(false)}>
  11. <Modal.Title className={`${styles.createText}`}>
  12. Create User Form
  13. </Modal.Title>
  14. </Modal.Header>
  15. <Modal.Body>
  16. <UpdateUser user={user} setShowUpdateModal={setShowUpdateModal} />
  17. </Modal.Body>
  18. </Modal.Dialog>
  19. </Modal>
  20. );
  21. }
  22. export default UpdateModal;
mjqavswn

mjqavswn1#

问题是,你不能从回调函数返回JSX,并期望React知道它需要在某处呈现它。
showModal回调可以更新showUpdateModal状态,父组件将使用更新后的状态值重新呈现。从这里,您只需将模态渲染为父组件的渲染返回的一部分。
更新showUpdateModal状态以保存对特定用户的引用或空值。将其传递给模态的user prop。所有模态关闭操作都应该将showUpdateModal状态设置回null以关闭模型。
示例:

  1. function UserContent() {
  2. const [showUpdateModal, setShowUpdateModal] = useState<IUser | null>(null);
  3. const showModal = (user: IUser) => {
  4. setShowUpdateModal(user);
  5. };
  6. ...
  7. return (
  8. <>
  9. <div>
  10. <Table responsive striped bordered hover variant="light">
  11. ...
  12. <Pen
  13. color="black"
  14. size={20}
  15. onClick={() => showModal(user)} // <-- toggles modal open
  16. />
  17. ...
  18. </Table>
  19. </div>
  20. <UpdateModal
  21. user={showUpdateModal} // user or null
  22. showUpdateModal={!!showUpdateModal} // <-- toggles modal open/close
  23. setShowUpdateModal={setShowUpdateModal}
  24. />
  25. ...
  26. </>
  27. );
  28. }
  1. type updateModalProps = {
  2. setShowUpdateModal: (user: IUser | null) => void;
  3. showUpdateModal: IUser | null;
  4. user: IUser;
  5. };
  6. const UpdateModal: FC<updateModalProps> = ({
  7. setShowUpdateModal,
  8. showUpdateModal,
  9. user
  10. }) => {
  11. return (
  12. <Modal showUpdateModal={showUpdateModal}>
  13. <Modal.Dialog>
  14. <Modal.Header closeButton onClick={() => setShowUpdateModal(null)}>
  15. <Modal.Title className={`${styles.createText}`}>
  16. Create User Form
  17. </Modal.Title>
  18. </Modal.Header>
  19. <Modal.Body>
  20. <UpdateUser user={user} setShowUpdateModal={setShowUpdateModal} />
  21. </Modal.Body>
  22. </Modal.Dialog>
  23. </Modal>
  24. );
  25. }
展开查看全部
ctzwtxfj

ctzwtxfj2#

我认为您需要有条件地在UserContent的返回值中呈现UpdateModal组件。从概念上讲,这是最常见的流程:

  1. const UpdateModal = (...) => {...}
  2. const UserContent = (...) => {
  3. const [showUpdateModal, setShowUpdateModal] = useState(false);
  4. return (
  5. <>
  6. {showUpdateModal ? <UpdateModal /> : null}
  7. ...
  8. <Pen color="black" size={20} onClick={() => { setShowUpdateModal(true); }} />
  9. </>
  10. )
  11. }

此代码将在单击Pen时触发重新渲染,因为状态改变。然后,因为showUpdateModaltrueUpdateModal将被渲染。然而,这将要求您重新组织代码。

展开查看全部

相关问题