时间戳

首页 > 解决方案 > 在 React 中加载 .js 脚本，分页/导航栏链接问题

javascript - 在 React 中加载 .js 脚本，分页/导航栏链接问题

问题描述

我知道我有一个类似于这里的问题，尽管在我看来这是我已经在做的事情。

我有一个函数可以将脚本广告到页面上，如下所示。

export const appendScript = function (scriptToAppend, sourceScript = true) {
 if (sourceScript) {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.async = false;
    script.src = scriptToAppend;
    document.body.appendChild(script);
  } else {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.async = false;
    script.innerHTML = scriptToAppend;
    document.body.appendChild(script);
  }
};

export const removeScript = (scriptToremove) => {
  let allsuspects = document.getElementsByTagName("script");
  for (let i = allsuspects.length; i >= 0; i--) {
    if (
      allsuspects[i] &&
      allsuspects[i].getAttribute("src") !== null &&
      allsuspects[i].getAttribute("src").indexOf(`${scriptToremove}`) !== -1
    ) {
      allsuspects[i].parentNode.removeChild(allsuspects[i]);
    }
  }
};

我将脚本添加到 HTML 中：

  componentDidMount() {
    //Jquery Plugin from the asset site. These are used always.
    appendScript("assets/js/jquery-2.2.1.min.js");
    appendScript("assets/js/jquery-migrate-1.2.1.min.js");
    appendScript("assets/bootstrap/js/bootstrap.min.js");

  }

尽管在导航中导航时其中一个脚本没有正确加载（通过<Link></Link>component.

虽然一旦我刷新页面，脚本正在运行，我可以看到正在使用的脚本，例如显示图片、猫头鹰轮播和其他可见效果。

分页，我从来没有让脚本在下一页上工作，主要是img没有出现。

  {pages.map((page) => (
    <li key={page} className={page === currentPage ? "active" : "null"}>
      <Link to="#" onClick={() => onPageChange(page)}>
        {" "}
        {page}
      </Link>
    </li>
  ))}

也许这也是我在 React 中检索 img 元素的方式：

<div className="image bg-transfer">
              <img src={tag.imagePath} alt="Sorry Can't Find :(" />
            </div>

为了为反应加载脚本，这种方法是否正确？从静态 HTML 草稿到 React.js，我不能对脚本进行太多更改。我希望有一个简单的答案...

标签： javascriptreactjspagination

解决方案

感谢爱好者@Tasos Bu，我明白了我所缺少的，他让我想到了添加我需要的脚本的想法，如下所示。这解决了我所有的问题（不是全部，仍然不是百万富翁）。这是我的做法。我正在向 HTML 添加和删除在呈现后仍使用 JQuery 的脚本。

  componentDidMount() {
    //All custom Js functions, responsivness etc.
    appendScript("assets/js/custom.js");
  }
  componentDidUpdate() {
    //All custom Js functions, responsivness etc.
    removeScript("assets/js/custom.js");
    appendScript("assets/js/custom.js");
  }

推荐阅读