0

现在我正在尝试在 ComponentDidMount 生命周期方法中创建一个函数，它将一个脚本标记注入到 return 语句中。此脚本将用于调用Clicktale。但是，即使在检查组件已安装并且文档状态已达到“完成”之后，当我尝试查找脚本标记时，它仍然会返回未定义。因此，我无法将属性添加到将调用 Clicktale 的脚本标记。通常使用 Clicktale，您只需在正文底部添加脚本，但对于我正在处理的项目，我需要使用 React。

我知道在 React 中使用 getElementsByTagName 方法时，它应该返回一个具有该标签名称的元素数组。但是当控制台日志记录时， document.getElementsByTagName('script') 我只收到 HTMLCollection {} 我认为这意味着它是空的，因为日志记录document.getElementsByTagName('script')[0] 返回未定义。

这是主要组件：

import React, { Component } from 'react';

class Clicktale extends Component {

  componentDidMount() {
    if (!window.clickTaleTagInjected) {
        const clickTaleTagInjected = true;
        function injectTag() {
          const ns = document.createElementNS;
          const a = ns ? ns.call(document, 'http://www.w3.org/1999/xhtml', 'script') : document.createElement('script');
          const s = document.getElementsByTagName('script')[0];
          a.async = true;
          a.crossOrigin = 'anonymous';
          a.type = 'text/javascript';
          a.src = 'specific clicktale cdn url I am using here';
          s.parentNode.insertBefore(a, s);
        }
        if (document.readyState === 'complete') {
          injectTag();
        } else {
          window.addEventListener('load', () => {
            setTimeout(injectTag, 0);
          });
        }
      }
  }
  render() {
    return (
        <div>
        </div>
    );
  }
}

export default Clicktale;

这是父组件（我认为这不应该干扰？）：

import React from 'react';
import Helmet from 'react-helmet';
import Clicktale from './Clicktale';


export const Parent = () => (
  <div>
    <Helmet
      link={[
        {
          rel: 'stylesheet',
          href: 'using private link here',
        },
      ]}
    />
    <Clicktale />
  </div>
);

export default Parent;

我收到的具体错误是：

TypeError: Cannot read property 'parentNode' of undefined

这指的是与

s.parentNode.insertBefore(a, s)

最终，我试图弄清楚为什么它在注入后找不到脚本标签。我还想知道我是否应该在返回中包含除 div 标签之外的其他内容？我认为该组件可以毫无问题地在其中注入脚本标签，但事实并非如此。

谢谢你的任何指点:)

4

0 回答 0