在呈现的 html 中的 componentDidMount 上添加 javascript 对象

Question

我想在出于跟踪目的安装组件时将 javascript 对象添加到模板中。对象需要像这样呈现：

var tracking = {
        pagename: 'page name',
        channel: 'lp',
        subSection1: 'section',
        pageidentifier: 'identifier'
      }

我已经在 componentDidMount 函数中设置了一个状态对象，但我似乎无法让该对象出现在页面上。

下面是我在渲染函数中调用的内容：

<script>{`
      var dataLayer = ${this.state.tracking}
    `}</script>

这个returns [object,object] 但我需要它来写出对象。

我该怎么做？我找不到任何这样做的例子，这似乎是一件很简单的事情，但我想不通

Answer 1

附加 script 标签的一种方法是：

componentWillMount() {
        const script = document.createElement("script");
        script.text= this.state.tracking;    
        document.body.appendChild(script);
}

如果这个 object 是全局的，为什么不直接将它附加到 window？
window.dataLayer = this.state.tracking;

Answer 2

如果您希望与 React 范围之外的跟踪功能进行交互，您也可以使用全局功能。在你index.html:

<script>
  document.MyTrackingFunc = function (data) {
    console.log(data);
  }
</script>

并且在你的 componentDidMount 函数中：

document.MyTrackingFunc(someData);

在呈现的 html 中的 componentDidMount 上添加 javascript 对象

Add javascript object on componentDidMount in rendered html

javascript

reactjs

tracking