Как использовать Thymeleaf th: текст в реакцииJS

Question

Я запускаю приложение с пружинным приложением с Thymeleaf и reactJS. Весь текст HTML читается из message.properties, используя th: текст на страницах, но когда у меня есть текст в блоке HTML responseJS, responseJS кажется злым.

render() { 
    return (
     <input type="text" th:text="#{home.welcome}"> 
) 
} 

Ошибка:

Namespace tags are not supported. ReactJSX is not XML. 

Есть ли Walkaround помимо использования dangerouslySetInnerHTML?

Спасибо!

Answer 1

Нет разумного обходного пути.

Вы получаете эту ошибку, потому что Thymeleaf выводит XML и парсеры JSX не анализируют XML.

Вы сделали это, потому что JSX выглядит очень, очень похоже на XML. Но они очень и очень разные, и даже если вы каким-то образом взломали Thymeleaf, чтобы стянуть атрибуты с именами и смогли получить компонент для рендеринга, это будет всего лишь мимолетный момент скрепленного каналом, связанного с жюри кода, который будет разваливаются при дальнейшем использовании.

Это действительно очень плохая идея, потому что JSX - это Javascript. Вы создаете Javascript на лету. Чтобы назвать несколько причин, это не сработает в долгосрочной перспективе:

• Это делает ваши компоненты трудными, если не невозможными, для тестирования.
• Рассуждение о состоянии приложения будет кошмаром, поскольку вы будете пытаться выяснить, исходит ли источник определенного состояния от Тимелеафа или JS.
• Ваше приложение полностью остановится, если Thymeleaf выйдет из строя JS.
• Эти проблемы со временем ухудшатся (Thyme?), Так как разработчики злоупотребляют легкостью, с которой они могут отображать серверные данные на стороне клиента, что приводит к безумной архитектуре приложений.

Не делайте этого. Просто используйте Thymeleaf или просто используйте React.

Образец Альтернатива: Я в основном работаю над приложением React, поддерживаемым Java-бэкэнд. Поэтому я понимаю, как кто-то может наткнуться на этот гибрид и подумать, что это может быть хорошей идеей. Вероятно, вы уже используете Thymeleaf и пытаетесь выяснить, как избежать переписывания своих сервлетов, но все же получите силу React.

Мы были в аналогичной лодке два года назад, за исключением старения JSP-интерфейса, но разница незначительна. То, что мы сделали (и хорошо работает), использует страницу JSP для загрузки всего приложения React. Сейчас есть одна страница JSP, которую мы визуализируем для пользователя. Эта страница JSP выводит JSON в один тег <script>, который содержит некоторые начальные данные запуска, которые мы в противном случае должны были бы получить немедленно. Это содержит ресурсы, свойства и просто данные.

Затем мы выводим еще один <script>, который указывает на местоположение скомпилированного модуля JS, содержащего все автономное приложение React. Это приложение загружает данные JSON один раз, когда оно запускается, а затем делает обратные вызовы для остальных.В некоторых местах мы должны использовать JSP для них, что является менее идеальным, но все же лучше, чем ваше решение. Что мы делаем, так это то, что на страницах JSP выводится один атрибут, содержащий JSON. Таким образом (и с некоторой осторожной обрезкой нашей XHR-библиотекой) мы получаем слой обмена данными бедного человека, построенный на основе JSP, у нас нет времени для изменения.

Это определенно не идеальный вариант, но он хорошо работает, и мы получили много преимуществ от многих преимуществ Реакта. Когда у нас есть проблемы с этой своеобразной реализацией, их легко изолировать и разрешить.

Answer 2

Возможно использование ReactJS приложений в Тимелеафе. Подумайте, хотите ли вы статическую постоянную часть (например, некоторые ссылки или даже просто отображаемые данные), вы можете использовать Thymeleaf. Если у вас сложная часть (то, что требует перепечатки DOM, общие данные, обновления из UI/Sockets/whatever), вы можете использовать React.

Если вам нужно пройти, вы можете использовать Redux/другие методы.

Возможно, вы передадите свои данные через API для отдыха в часть React и просто визуализируете ваши простые части как фрагменты или целые куски простого HTML с помощью Thymeleaf.

Помните, что Тимелеаф - это просто HTML. Реакция - это виртуальный DOM, который отображается как HTML. На самом деле довольно легко перенести один на другой. Таким образом, вы можете написать что-нибудь «Static» или не очень сильно реагировать на пользовательский интерфейс, в Thymeleaf/HTML. Вы также можете просто отнести эти части в Реакт, но без состояния.

Thymeleaf 3 позволяет вам render variables from your Java to a separate JS file. Так что это также возможность перейти в JSX

function showCode() { var code = /*[[${code}]]*/ '12345'; document.getElementById('code').innerHTML = code; }