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

添加fs.writeFileSync(path,string)代码的一种方法是：

script

虽然这个componentWillMount() { const script = document.createElement("script"); script.text= this.state.tracking; document.body.appendChild(script); }是全局的，为什么不直接将它附加到窗口？ object

Answer 2

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

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

在componentDidMount函数中：

document.MyTrackingFunc(someData);

在渲染的html中添加componentDidMount上的javascript对象

2 个答案: