Как загрузить React JSX с загрузкой JQuery?

0

У меня есть один файл (мастер), который вызывает другой файл (загружается) с помощью jquery.load().

В загруженном файле работает javascrips, но код jsx игнорируется.

Можно ли загрузить код jsx таким образом? Если да, то как?

Если нет, то какие у нас альтернативы - как обрабатывать jsx-код в загружаемых файлах?

Код главной страницы:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React</title>
    <script src="https://fb.me/react-with-addons-0.13.2.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        $("#loaded").load("loaded.html", function(responseText, textStatus, req) {});
      });
    </script>

  </head>
  <body>

  <p>Master page</p>

  <div id="loaded"></div>

  </body>
</html>

Код загруженной страницы:

<script type="text/javascript">
  console.log("JQUERY WORKS");
</script>

<script type="text/jsx">
  console.log("REACT WORKS");
</script>


<p>loaded page</p>

Изменение: что я пытаюсь выполнить: я работаю над веб-приложением, которое загружает "фрагменты страницы" с загрузкой jquery, и мне нужно отобразить компонент React внутри этого фрагмента.

  • 0
    Почему бы вам даже подумать о внедрении «кода» JSX в контейнер? Вы пытаетесь визуализировать компонент React внутри контейнера? Кроме того, приведенный вами пример кода не является JSX.
  • 0
    @David, я пытаюсь визуализировать компонент React внутри контейнера, который загружен с помощью jquery load. Я отредактировал оригинальный вопрос. Может console.log («РЕАКТИВНЫЕ РАБОТЫ»); в jsx какие нибудь проблемы?
Показать ещё 2 комментария
Теги:

3 ответа

0
Лучший ответ

С React такой рабочий процесс не кажется правильным. Лучшим подходом является (например):

  • установить реактивные инструменты

    npm установить -g реактивные инструменты

  • разрабатывать компоненты в.jsx файлах в (например) папке jsx

  • автоматически компилировать jsx, если отредактирован в.js файлы на (например) папку js с помощью команды console

    jsx --extension jsx --watch jsx/js/

  • использовать.js файлы в веб-приложении

Поделиться
  • 0
    Да, это гораздо лучшее решение для React.
  • 0
    Вы можете загрузить тяжелый компонент только при некоторых условиях
0

Вы должны отделить логику JS/jQuery от логи React

Я бы посоветовал вам создать не-React программу поверх вашего приложения, чтобы управлять вашими фрагментами

Прочитайте этот пост первые предложения о извлекая и Eval uating dynamicaly загружен сценарий и о вставке <script> теги, указывающие на самостоятельной работы компонента (см после решения 2)

Решение 1:

// index.js
import React from 'react'
import { render } from 'react-dom'

$(() => {
  window.components = {}

  window.loadComponent = componentKey =>
    fetch('/components/${ componentKey }')
      .then(response => response.text())
      .then(text => {
        window.components[componentKey] = eval(text)
        render(window.components[componentKey],
          document.getElementById('anchor-${ componentKey }'))
})

В лучшем подходе использовался бы подход Redux для обеспечения как единого источника правды, так и односторонних принципов работы с данными

Решение 2 Здесь мы инкапсулируем наш компонент с простой логикой рендеринга

Теперь компонент можно связать в вашей DOM с помощью <script>

// fragment-bundle.js
import React from 'react'
import { render } from 'react-dom'
import Fragment from './Fragment/Fragment'

render(<Fragment/>, document.getElementById('anchor-fragment'))
Поделиться
0

Не уверен, что вы пытаетесь сделать здесь, но трансформатор JSX поставляется с методом преобразования, поэтому вы можете попробовать что-то вроде:

$.get('loaded.html', function(jsx) {
    var transformed = JSX.transform(jsx);
    $('#loaded').html('<script>'+transformed.code+'</script>');
})
Поделиться
  • 0
    Как получить ссылку на JSX?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню