在呈現的html中的componentDidMount上添加javascript對象

Question

我想在組件爲了跟蹤目的而裝入組件時將一個JavaScript對象添加到模板中。對象需要呈現出這樣的：

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

我已經設置的狀態對象在componentDidMount函數的對象，但我似乎無法得到的對象出現在頁面上。

下面是我所說的渲染功能，其中：

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

這將返回[對象，對象]，但我需要它寫出來的對象。

我該如何去做這件事？我找不到這樣做的任何例子，它似乎像這樣一個簡單的事情，但不能弄明白追加script標籤

Answer 1

一種方法是這樣的：

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);