html 如果我使用CDN，我需要在React中等待我的脚本标签吗？

7bsow1i6 于 2023-05-15 发布在 React

关注(0)|答案(1)|浏览(119)

我有一个项目，我正在使用CDN加载脚本。我直接通过useEffect在我的组件中加载它。简化代码：

React.useEffect(() => {
    const script = document.createElement('script');

    script.src = "https://cdn.cubing.net/js/cubing/twisty";
    script.type= "module";

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    }
  }, []);

  return (
      <twisty-player>
      </twisty-player>
)

Twisty-player是来自脚本的自定义HTML标记（它不是react组件）。它的文档在这里：https://js.cubing.net/cubing/twisty/
我有几个问题
1.这段代码对我来说是有效的，但我不明白为什么，因为我们没有等待任何东西。我在加载脚本后立即渲染了twisty-player，但我们没有等待脚本下载完成，所以我不确定如何渲染它。
1.这是为twisty-player添加脚本的推荐方法吗？有没有更好的办法？
1.我尝试将脚本直接加载到HTML头部，然后从组件中删除整个useEffect语句，但这不起作用，为什么？

Html

来源：https://stackoverflow.com/questions/74737990/do-i-need-to-await-my-script-tag-in-react-if-im-using-a-cdn

1条答案

按热度按时间

rqmkfv5c1#

如果你尝试在ReactJs上使用cubing/twisty。
您可以通过npm install cubing通过npm使用cubing
这里是你可以做到这一点的简单方法。

import { TwistyPlayer, TwistyPlayerConfig } from "cubing/twisty";
import React, { useEffect, useRef } from "react";

const renderTwistyPlayer = (config?: TwistyPlayerConfig) => {
  return new TwistyPlayer(config);
};

export default function Demo() {
  const twistyRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const twistyDom = twistyRef.current;
    if (twistyDom) {
      twistyDom.innerHTML = "";
      twistyDom.appendChild(
        renderTwistyPlayer({
          puzzle: "3x3x3",
          alg: "U' D B' L B' U' R F2 U R2 F' U2 R2 F2 R2 B D2 F' R2 L2 B2",
          background: "none",
        })
      );
    }

    return () => {
      twistyDom?.removeChild(twistyDom.firstChild as Node);
    };
  }, []);

  return <div ref={twistyRef}>Nothing</div>;
}

赞(0）回复(0）举报 2023-05-15

我来回答

html 如果我使用CDN，我需要在React中等待我的脚本标签吗？

1条答案

相关问题

热门标签

最新问答