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

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

我有下面的函数调用显示一个模态对话框点击编辑按钮。如何从函数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;
mjqavswn

mjqavswn1#

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

function UserContent() {
  const [showUpdateModal, setShowUpdateModal] = useState<IUser | null>(null);

  const showModal = (user: IUser) => {
    setShowUpdateModal(user);
  };

  ...

  return (
    <>
      <div>
        <Table responsive striped bordered hover variant="light">
          ...
          <Pen
            color="black"
            size={20}
            onClick={() => showModal(user)} // <-- toggles modal open
         />
          ...
        </Table>
      </div>

      <UpdateModal
        user={showUpdateModal} // user or null
        showUpdateModal={!!showUpdateModal} // <-- toggles modal open/close
        setShowUpdateModal={setShowUpdateModal}
      />

      ...
    </>
  );
}
type updateModalProps = {
  setShowUpdateModal: (user: IUser | null) => void;
  showUpdateModal: IUser | null;
  user: IUser;
};

const UpdateModal: FC<updateModalProps> = ({
  setShowUpdateModal,
  showUpdateModal,
  user
}) => {
  return (
    <Modal showUpdateModal={showUpdateModal}>
      <Modal.Dialog>
        <Modal.Header closeButton onClick={() => setShowUpdateModal(null)}>
          <Modal.Title className={`${styles.createText}`}>
            Create User Form
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <UpdateUser user={user} setShowUpdateModal={setShowUpdateModal} />
        </Modal.Body>
      </Modal.Dialog>
    </Modal>
  );
}
ctzwtxfj

ctzwtxfj2#

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

const UpdateModal = (...) => {...}

const UserContent = (...) => {
  const [showUpdateModal, setShowUpdateModal] = useState(false);

  return (
    <>
      {showUpdateModal ? <UpdateModal /> : null}
      ...
      <Pen color="black" size={20} onClick={() => { setShowUpdateModal(true); }} />

    </>

  )
}

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

相关问题