Блог

У меня есть html-файл, и он принимает несколько строк запроса

Html-файл также содержит css и скрипт, включенный с помощью тега script

т.е. мы можем вызвать этот HTML-файл, как показано ниже

external.html?param='something'

я должен использовать этот HTML-код в компоненте react и возвращать как JSX. в настоящее время я выполнил возврат в виде Iframe, как показано ниже

 const Component = () => {
    const iframeUrl = `external.html?param='something'`;
    return (
        <iframe
            {...props}
            src={iframeUrl}
        />
    )
}
  

но как я могу обойтись без использования iframe или iframe с локальным html (не следует постоянно загружать html с сервера)?

Вы не можете просто импортировать HTML-документ в качестве компонента react. Фреймы Iframes предназначены только для этого.

Чтобы импортировать локальный html-файл в виде iframe без постоянного запроса удаленного ресурса, вы должны вставить содержимое файла в атрибут iframe srcdoc , который является альтернативой src встроенному html.

Однако имейте в виду, что html-код все равно будет передаваться при перезагрузке, только вместе с остальной частью приложения, а не в отдельном запросе. Для реального кэширования вам придется использовать механизмы локального хранения и др.

Установив это, вы можете затем манипулировать параметрами запроса:

 // iframe inside a react ref
frameRef.current.contentWindow.location.href  = 'myQueryParams'
  

Вы также можете обновить фрейм (он сохраняет параметры):

 frameRef.current.contentWindow.location.reload()