Typescript 如何从一个函数中调用React组件函数元素

问题是，您不能从回调函数返回JSX并期望RESPECT知道它需要在某个地方呈现它.

showModal回调可以更新showUpdateModal状态，父组件将使用更新后的状态值重新呈现.在这里，您只需将模型作为父组件的呈现返回的一部分呈现即可.

更新showUpdateModal状态以保存对特定用户的引用或空值.把这个传给情态车的userprops .所有模式关闭操作都应将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>
  );
}