Блог

Главная - Вопросы по программированию - Ввод HTML-кода в React с помощью шлема

Ввод HTML-кода в React с помощью шлема

#javascript #reactjs

Вопрос:

Я использую Neutrino для создания собственного приложения react. Для этого я хочу добавить немного HTML-кода в свой код. Я использую React Helmet, но получаю ошибки. Я не понимаю причины.

Ниже приведен мой код

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

Ошибка, которую я получаю, такова:

ОШИБКА в сборке модуля ./src/app/App.jsx не удалась (из ./node_modules/@neutrinojs/compile-loader/node_modules/babel-loader/lib/index.js ): Синтаксическая ошибка: /Users/Mac/Desktop/webapp/app/src/app/App.jsx: Неожиданное зарезервированное слово «пусть» (17:12)

Комментарии:

1. Привет @Edd, посмотрев на ошибку «Неожиданное зарезервированное слово «let»», я предложу просто изменить let mf = document.createElement("script"); by var mf = document.createElement("script");

2. Все еще получаю ошибку @max

Ответ №1:

Как правило, вы не можете просто поместить встроенный Javascript внутри тегов JSX.

Согласно документации Helmet, вы должны добавить блок Javascript, содержащий строку:

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

Почему JS в JSX не работает:

HTML-подобный код в React — это не HTML, а JSX.

В качестве дочерних элементов элементов JSX (между тегами JSX) единственным разрешенным содержимым являются другие элементы или строки JSX (и некоторые другие конкретные вещи).

Теоретически некоторые части кода Javascript (JS) между тегами JSX будут «действительными», если их можно интерпретировать как строку, например, например console.log("hello"); , но на самом деле это не JS, это просто строка, похожая на JS. Например. строка like console.log("XX] также будет «действительной» в JSX, но недопустимый JS-код.

Ваш код выдает ошибку, let потому что это первое, что следует за фигурной скобкой { . Все, что было до этого, может быть просто интерпретировано как строка, но { указывает начало выражения JS, где let недопустимо. ( let допустимо в JS, но не в выражениях JS.)

Почему решение работает:

(Примечание: я не знаю Helmet, но я могу объяснить, почему работает JSX)

То, как это сделано в документации по шлему, должно работать, потому что фигурные скобки { ... } указывают на блок JS, обратные ссылки указывают на многострочную строку, поэтому все, что находится внутри обратных ссылок (т. Е. Ваш вводимый JS-код), является просто строкой, по-видимому, шлем будет обрабатывать это правильно или, вероятно, будет просто вставьте строку, не задаваясь вопросом, является ли она допустимой JS.

Таким образом, это был бы действительный JSX, и, вероятно, он также был бы введен без ошибок Helmet (?), Но выдаст ошибку, когда браузер попытается выполнить <script> содержимое:

 <script type="text/javascript">{`
    some invalid javascript code ¯_(ツ)_/¯
`}</script>
Метки: