问反应中等效的jQuery .load()
EN

Stack Overflow用户

提问于 2022-10-09 12:21:58

回答 1查看 51关注 0票数 1

我正在学习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' />
    }
 />

提前谢谢你！

javascript

jquery

reactjs

向量数据库

传统知识库搭建耗时费力？腾讯云向量数据库 + Dify混合检索，轻松实现高效知识管理与精准问答！

回答 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>;