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

Question

我想在组件挂载时将 javascript 对象添加到模板中以进行跟踪。对象需要像这样渲染出来：

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

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

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

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

这会返回 [object,object] 但我需要它来写出对象。

我该怎么做呢？我找不到任何这样做的例子，这似乎是一件很简单的事情，但无法弄清楚

Answer 1

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

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

虽然这个object是全局的，为什么不直接把它贴在窗口上呢？
window.dataLayer = this.state.tracking;

Answer 2

如果您希望与 React 范围之外的跟踪函数进行交互，您还可以使用全局函数。在你的 index.html 中：

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

在你的 componentDidMount 函数中：

document.MyTrackingFunc(someData);