In React, component inside of a modal to be ready/rendered before the modal is open

Question

I have a react component that opens a modal window, and inside of that modal window, there is a second component, a form.

The form needs to communicate with an external service, as it loads an iframe.

When the page loads, the form component does not exist, so when I open the modal, the form component is rendered, THEN it communicates with the external service, and returns the iframe, so it takes a few seconds to load.

Is there any way to have this component ready when the page first loads? Before the modal is actually opened?

The code:

const HubspotForm = ({ id, redirect = false }) => {
    const script = document.createElement('script');
    script.src = 'https://js.hsforms.net/forms/v2.js';
    document.body.appendChild(script);
    const jqScript = document.createElement('script');
    jqScript.src =
        'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js';
    document.body.appendChild(jqScript);
    const base_url = window.location.origin;

    script.addEventListener('load', () => {
        if (window.hbspt) {
            window.hbspt.forms.create({
                portalId: 'xxx',
                formId: 'xxx',
                target: '#hubspotForm',
                inlineMessage:
                    "<p style='text-align:center;padding:100px 30px'>Redirecting, please wait...</p>",

                onFormSubmit: function ($form) {
                    let redirect_url = `${base_url}/thank-you/?goal=1`;
                    setTimeout(function () {
                        window.location = redirect_url;
                    }, 250);
                },
            });
        }
    });

    return (
        <div>
            <div
                id="hubspotForm"
                css={css`
                    input[type='submit'] {
                        background-color: var(--primary) !important;
                    }
                `}
            ></div>
        </div>
    );
};

return (
    <StyledDialog
        onClose={handleClose}
        aria-labelledby="simple-dialog-title"
        open={open}
    >
        <div className="modal-close" onClick={handleClose}>
            <GrClose color="red" />
        </div>
        <h3>{demoRequest.demoRequestFormTitle}</h3>

        <p>{demoRequest.demoRequestFormText}</p>
        <HubspotForm redirect={true} />
    </StyledDialog>
);

...

export default function SimpleDialogDemo({
    btnText = 'Talk To An Expert',
    variant = 'contained',
    white = false,
}) {

    const classes = useStyles();
    const [open, setOpen] = React.useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = (value) => {
        setOpen(false);
    };

    return (
        <>
            <Button
                variant="contained"
                color="primary"
                className={white ? classes.btnWhite : classes.btn}
                disableElevation={white ? true : false}
                onClick={handleClickOpen}
            >
                {btnText}
            </Button>
            <SimpleDialog open={open} onClose={handleClose} />
        </>
    );
}

Answer 1

您可以尝试在 css 中使用 display:none 和 zIndex: -1... 并在默认情况下将您的 openModal 属性设置为 true

Answer 2

It seems that you have two jobs.

1. Display the modal
2. Acquire the needed information to open the iframe.

I would get the info initially somewhere else in the load function and store it in the state. So when the modal opens, the state will be already set and no overhead in loading time is added.

Is there any specific reason the communication is initiating when the modal opens?