反应中等效的jQuery .load()
反应中等效的jQuery .load()
提问于 2022-10-09 12:21:58
我正在学习React，并尝试迁移一个PHP + jQuery页面来做出反应(没有jQuery)。但是，由于页面的复杂性，我不能同时完全迁移所有的页面。因此，我需要开始迁移一些已经作为内容加载旧页面的React页面。
我想要我的导航页脚..。在仍然使用旧页面的内容的同时，已经做出了反应。我认为像jQuery $(".content").load(url + ' .content')这样的东西是我正在寻找的东西，但是没有使用jQuery。
在“反应”中，我建立了这样的东西：
import React, { useState, useEffect } from "react";
export default function ContentLoader(params){
const [content, setContent] = React.useState("");
function load(url) {
fetch(url).then(res => {
let html = res.text();
setContent(html.querySelector(".content"));
});
}
useEffect(() => {
load(params.url);
});
return(
<div className="content">
{content}
</div>
)
}但是，我得到了一个错误Unhandled Rejection (TypeError): html.querySelector is not a function. (In 'html.querySelector(".content")', 'html.querySelector' is undefined)
仅对于上下文，元素被集成到另一个元素中，如下所示：
<Route
path='/stackoverflow'
element={
<ContentLoader url='http://myurl.com/stackoverflow' />
}
/>提前谢谢你！
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-10-09 16:20:51
您的主要问题是，res.text()使用的是普通字符串，而不是HTML文档。
在将HTML片段插入到JSX中时也会遇到问题。
第一个问题可以通过使用DOMParser (或具有内置解析器的XMLHttpRequest )来解决。
对于第二个，您可以使用一个状态变量来保存.content元素的.content，并通过dangerouslySetInnerHTML插入它。
import { useEffect, useState } from "react";
const parser = new DOMParser();
const load = async (url, selector) => {
const res = await fetch(url);
if (!res.ok) {
throw new Error(`${url}: ${res.status} ${res.statusText}`);
}
const html = await res.text();
const doc = parser.parseFromString(html, "text/html");
return doc.querySelector(selector);
};
export default function ContentLoader({ url }) {
const [content, setContent] = useState();
useEffect(() => {
load(url, ".content")
.then((el) => {
setContent({ __html: el?.outerHTML });
})
.catch(console.error);
}, [url]);
return <div className="content" dangerouslySetInnerHTML={content} />;
}
您还可以使用一个ref元素并追加已解析的文档片段。
const contentRef = useRef(null);
useEffect(() => {
load(url, ".content")
.then((content) => {
// empty out any previous content
contentRef.current.innerHTML = "";
contentRef.current.append(content);
})
.catch(console.error);
}, [url]);
return <div className="content" ref={contentRef}></div>;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74008108
复制相关文章
相似问题
腾讯云开发者
