Estoy usando Neutrino para crear mi propia aplicación de reacción. Quiero agregar algo de código HTML a mi código para eso. Estoy usando React Helmet pero recibo errores. no entiendo el motivo
A continuación se muestra mi código
import {Helmet} from 'react-helmet'; import {hot} from 'react-hot-loader'; import React from 'react'; import './App.css'; import Main from './main/Main'; const App = () => ( <div className='App'> <Helmet> <base /> <script type="text/javascript"> window._mfq = window._mfq || []; (function() { let mf = document.createElement("script"); mf.type = "text/javascript"; mf.defer = true; mf.src = "//cdn.mouseflow.com/projects/xyz.js"; document.getElementsByTagName("head")[0].appendChild(mf); })(); </script> </Helmet> <Main /> </div> ); export default hot(module)(App);El error que estoy recibiendo es:
ERROR en ./src/app/App.jsx La compilación del módulo falló (de ./node_modules/@neutrinojs/compile-loader/node_modules/babel-loader/lib/index.js): SyntaxError: /Users/Mac/Desktop/webapp /app/src/app/App.jsx: Palabra reservada inesperada 'let' (17:12)
Por lo general, no puede simplemente poner Javascript en línea dentro de las etiquetas JSX.
De acuerdo con la documentación de Helmet , debe agregar un bloque de Javascript que contenga una cadena:
<script type="text/javascript">{` window._mfq = window._mfq || []; (function() { let mf = document.createElement("script"); mf.type = "text/javascript"; mf.defer = true; mf.src = "//cdn.mouseflow.com/projects/xyz.js"; document.getElementsByTagName("head")[0].appendChild(mf); })(); `}</script>El código similar a HTML en React no es HTML, sino JSX.
Como elementos secundarios de los elementos JSX (entre las etiquetas JSX), el único contenido permitido son otros elementos o cadenas JSX (y algunas otras cosas específicas).
En teoría, algunas partes del código Javascript (JS) entre las etiquetas JSX serían "válidas", siempre que se puedan interpretar como una cadena, como, por ejemplo, console.log("hello"); , pero eso no es realmente JS, es solo una cadena que se parece a JS. Por ejemplo, una cadena como console.log("XX] también sería "válida" en JSX, pero no es un código JS válido.
Su código arroja un error en let porque es lo primero después de la llave { . Todo lo anterior puede interpretarse simplemente como una cadena, pero { indica el comienzo de una expresión JS, donde let no es válido. ( let es válido en JS, pero no en expresiones JS).
(Observación: no sé Helmet, pero puedo explicar por qué funciona el JSX)
La forma en que se hace en la documentación de Helmet debería funcionar, porque los corchetes { ... } indican un bloque JS, los acentos graves indican una cadena de varias líneas, por lo que todo lo que está dentro de los acentos graves (es decir, su código JS que se inyectará) es solo una cadena, aparentemente un Casco lo manejará correctamente, o probablemente simplemente insertará la cadena sin cuestionar si es JS válido.
Entonces, esto sería JSX válido, y probablemente también lo inyectaría sin error Helmet (?), pero arrojará un error cuando el navegador intente ejecutar el contenido de <script> :
<script type="text/javascript">{` some invalid javascript code ¯\_(ツ)_/¯ `}</script>