Question

加载页面拳头后，将调用脚本，并且页面将正确显示。当我使用react-router切换页面路由时，javascript没有重新运行，所以我最终得到一个空的div。这是我的代码：

import React, { useEffect } from "react";

const ServiceCard = props => {

  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://assets.ubuntu.com/v1/juju-cards-v1.7.2.js";
    document.body.appendChild(script);
  }, [props]);

  return (
    <div className={classes.card}>
      <div>
        <h4 className={classes.headerTitle}>{props.title}</h4>
        <p className={classes.headerDescription}>{props.description}</p>
      </div>
      <div>
        <div
          className="juju-card"
          data-id="~omnivector/bundle/elasticsearch-non-uniform-2"
          data-dd
        ></div>
      </div>
    </div>
  );
};

export default ServiceCard;

我找到了一个使用基于类的组件的解决方案，但在本项目中我尝试避免使用它们。预先感谢！

Answer 1

我看到这段代码只能在第一次使用，因为下次以后您的道具将不会更改，并且useEffect挂钩将不会运行。您可以尝试从依赖项中删除道具，而只需使用[]。并且确保没有每次都注入脚本。

如果这行不通，则应使用动态导入作为基于Promise解决方案的资源。

Answer 2

您的道具可能在改变路线时没有改变。您应该使用withRouter() HOF包装组件，并使用props.location.pathname而不是props来检查useEffect挂钩中的路由更改。

如何使用react-router-dom和React钩子加载JavaScript文件？

2 个答案: