向 React/JSX 添加脚本标签

本题的目标是探索向 React 组件添加内联脚本的方法。用户尝试使用内联脚本标签和angerlySetInnerHTML属性加载外部脚本，但这两种方法似乎都无法执行所需的脚本。

建议的一个解决方案是在React组件中创建一个componentDidMount方法并动态创建创建脚本元素并将其附加到 DOM。这种方法确保脚本在组件安装时仅执行一次。

但是，React 中更现代和推荐的方法是使用 useEffect 钩子。该钩子允许您在组件渲染后执行副作用，例如进行 API 调用或操作 DOM。

以下代码片段演示了如何使用 useEffect 加载脚本：

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://use.typekit.net/foobar.js';
  script.async = true;
  document.body.appendChild(script);

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

登录后复制

通过将此代码包装在自定义挂钩中，它可以在多个组件中重用：

const useScript = url => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = url;
    script.async = true;
    document.body.appendChild(script);

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

登录后复制

可以用作如下所示：

import useScript from 'hooks/useScript';

const MyComponent = props => {
  useScript('https://use.typekit.net/foobar.js');

  // Rest of the component
}

登录后复制

将 useEffect 钩子与自定义脚本钩子结合使用，提供了一种在 React 组件中加载和执行脚本的干净高效的方法。

以上是如何安全高效地为React组件添加脚本标签？的详细内容。更多信息请关注PHP中文网其他相关文章！