React應用程序中的內嵌JavaScript

我想在同構React應用程序的某些頁面上包含帶有一些內嵌JavaScript的腳本標記。React應用程序中的內嵌JavaScript

有問題的腳本標籤，是Facebook的轉換代碼：

https://developers.facebook.com/docs/ads-for-websites/conversion-pixel-code-migration

<script> 
(function() { 
    var _fbq = window._fbq || (window._fbq = []); 
    if (!_fbq.loaded) { 
    var fbds = document.createElement('script'); 
    fbds.async = true; 
    fbds.src = '//connect.facebook.net/en_US/fbds.js'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(fbds, s); 
    _fbq.loaded = true; 
    } 
})(); 
window._fbq = window._fbq || []; 
_fbq.push(['track','1234567890',{'value':'10.00','currency':'USD'}]); 
</script> 
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=1234567890&cd[value]=10.00&cd[currency]=USD&noscript=1" /></noscript>

因爲這些代碼僅在應用程序的某些網頁，我希望這個代碼塊存儲在變量並通過應用程序進行條件呈現。

但是，如果我包括一個.jsx文件是這樣的：

var code = <script>function() {var test = "test";}</script>;

然後我得到一個解析錯誤：

SyntaxError: test-page.jsx: Unexpected token (10:31) 

> 10 | var code = <script>function() {var test = "test";}</script>; 

    at Parser.pp.raise (/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13) 
    at Parser.pp.unexpected (/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8) 
    at Parser.pp.parseExprAtom (/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:425:12)

卸下 'VAR' 修復此：

var code = <script>function() {test = "test";}</script>;

...雖然我不知道爲什麼，但它不能真正解決問題，因爲我需要能夠使用var聲明。

是否有任何有關如何在<script>標記中包含內聯JavaScript作爲React/JSX中的變量的說明？有關我如何實現這一目標的任何建議？

（我只用跟蹤現在像素）

來源

2015-12-08 Alasdair McLeay

嘗試使用[react-helmet]（https://github.com/nfl/react-helmet）。它是''部分網站的經理。你可以在你的App.js中使用它來在''網站中設置項目，更具體地說，可以在特定組件中設置項目。我正在使用它來管理Facebook Pixel和Open Graph數據。 – rtmalone

你真的不應該使用JSX的東西，isn't JSX ......和移除「變種」是一個非常糟糕的主意了。假設/希望您使用的是CommonJS甚至ES6模塊，只需爲Facebook代碼創建一個單獨的模塊，並在需要時將其導入。儘管React是針對SPA的，所以你只需要在開始的時候在你的主要組件中加載一次。無論如何，你應該爲它創建一個模塊。沒有JSX，易於在其他項目中使用。

來源

2015-12-08 11:28:00 luschn

React應用程序中的內嵌JavaScript

回答

相關問題