Question

现在，我正在尝试在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标签之外的其他内容？我认为该组件将能够在其中注入脚本标签而不会出现问题，但这不是。

感谢您提出任何建议：）

尽管呈现，但ComponentDidMount（）中的GetElementsByTagName返回未定义

0 个答案: