时间戳

首页 > 解决方案 > 尝试插入脚本标记时属性 appendChild 未定义

reactjs - 尝试插入脚本标记时属性 appendChild 未定义

问题描述

我正在尝试将 SCRIPT 标记注入反应组件以加载cookieBot库。

这里有我的组件。

class CookieDeclarationSection extends React.Component {
  constructor() {
    super()
    this.state = {
      title: "Cookie declaration",
    }
  }

  componentDidMount() {
    const script = document.createElement("script")
    console.log(script)
    script.id = "CookieDeclaration"
    script.src = "https://consent.cookiebot.com/XXXX-XXXX-XXXX-XXXXXX"
    script.type = "text/javascript"
    script.async = true
    this.instance.appendChild(script)
  }

  render() {
    return (
    <div className="citation__result">
        <WideScreenOnlyHeading title={this.state.title} />
        <div style={{margin: "16px"}}>
          {/*!-- insert SCRIPT TAG here */}
        </div>
    </div>
    )
  }
}

但是我不断得到

无法读取未定义的属性 appendChild

. 我在这里想念什么？谢谢！

标签： reactjsreact-redux

解决方案

您应该考虑使用react-safe包仅使用 jsx 附加脚本：

import React from "react";
import Safe from "react-safe"

const CookieDeclarationSection = () => (
  <div className="citation__result">
    <WideScreenOnlyHeading title="Cookie declaration" />
    <div style={{margin: "16px"}}>
      <Safe.script type="text/javascript" src="https://consent.cookiebot.com/XXXX-XXXX-XXXX-XXXXXX" async></Safe.script>
    </div>
  </div>
)

推荐阅读