У меня есть приложение React с именем react-app, вложенное в страницу в моем проекте SilverStripe 4. В настоящее время он отображается в непригодной для использования форме, при этом ни один из стилей CSS не работает должным образом, и странные вещи происходят с макетом SilverStripe для этой конкретной страницы (например, не прокручиваемый баннер, заполняющий всю страницу).
Этот вопрос относится к моему предыдущему вопросу, на который был получен отличный ответ от Робби Аверилла = ( Как вставить (внедрить?) Существующее приложение React (просто пользовательский интерфейс без внутреннего интерфейса) в макет страницы SilverStripe? ).
Когда я использую команду npm run build для создания файлов компоновки внутри react-app, создается папка компоновки media, содержащая файлы, которые не являются JavaScript или CSS. Как мне перенести эту папку build/static/media из react-app в мой проект SilverStripe? Я не могу использовать Requirements class (из SilverStripe), поскольку он работает только с файлами JavaScript или CSS.
Сгенерированные пути и файлы папок сборки:
build/static/js:
- main.f8fcfe77.js
- main.f8fcfe77.js.map
build/static/css:
- main.417390ae.css
- main.417390ae.css.map
build/static/media:
- bottom_image_height_improved_enlarged.0242eccb.svg
- glyphicons-halflings-regular.448c34a5.woff2
- glyphicons-halflings-regular.89889688.svg
- glyphicons-halflings-regular.e18bbf61.ttf
- glyphicons-halflings-regular.f4769f9b.eot
- glyphicons-halflings-regular.fa277232.woff
- ic_cloud_download.0258cc94.svg
- ic_cloud_upload.6bf269d8.svg
- ic_help.bb8f97ab.svg
- ic_local_download.ddb824a7.svg
- ic_menu.7f39fb5c.svg
- ic_new.57667fef.svg
- ic_open.ddb824a7.svg
- ic_print.420fc2c5.svg
- ic_save.3fee4fd0.svg
- logo.d6c538c9.svg
- master_menu_cancel_btn.53591bb8.svg
Ниже показан файл CircleAppPageController.php с использованием функции init и класса Requirements для извлечения файлов JavaScript и CSS из файлов сборки react-app. Примечание. react-app вложено в папку приложения проекта SilverStripe.
<?php
namespace SilverStripe\Lessons;
use SilverStripe\View\Requirements;
use PageController;
class ReactAppPageController extends PageController
{
protected function init()
{
parent::init();
// Requiring build files for react-app - Doesn't include media folder files!
Requirements::javascript('app/react-app/build/static/js/main.f8fcfe77.js');
Requirements::css('app/react-app/build/static/css/main.417390ae.css');
}
}
?>
Здесь я хочу, чтобы react-app появился в макете ReactAppPage.ss (Примечание: класс ReactAppPage.php расширяет класс Page.php. Макет для Page.ss включает в себя простую панель навигации, верхний и нижний колонтитулы который ReactAppPage.ss унаследует).
<% include Banner %>
<!-- BEGIN CONTENT -->
<div class="content">
<div class="container">
<div class="row">
<div class="main col-sm-8">
<div>
<div id="root">
I want the react-app with it's independent CSS stylings to appear here.
</div>
</div>
</div>
<div class="sidebar gray col-sm-4">
<% if $Menu(2) %>
<h3>In this section</h3>
<ul class="subnav">
<% loop $Menu(2) %>
<li><a class="$LinkingMode" href="$Link">$MenuTitle</a></li>
<% end_loop %>
</ul>
<% end_if %>
</div>
</div>
</div>
</div>
<!-- END CONTENT -->
Вещи, которые я пробовал:
1) Если мне требуются только файлы сборки JavaScript, макет страницы SilverStripe не нарушается.
class ReactAppPageController extends PageController
{
protected function init()
{
parent::init();
Requirements::javascript('app/react-app/build/static/js/main.f8fcfe77.js');
}
}
При просмотре ReactAppPage я вижу простой текст для большинства react-app заголовков (не для всех). Есть неустановленные выпадающие меню, с которыми я могу взаимодействовать. Это подтверждает, что некоторые аспекты React работают, но страница по-прежнему непригодна для использования. Могут ли CSS-файлы тем SilverStripe переопределять CSS-файлы из файлов сборки react-app?
2) Скопировав содержимое папки build / static / media внутри react-app и переместив его в папку static / media за пределами моего проекта SilverStripe, SilverStripe найдет и запустит файлы, но это не изменится. результат на экране.
т.е. копирование содержимого папки из:
- WWW / мой-SilverStripe-проект / приложение / реагировать-приложение / строить / статические / СМИ
во вновь созданную папку:
Ожидаемые результаты:
При открытии страницы SilverStripe с вложенным react-app страница сохраняет правильный стиль и макет SilverStripe. react-app будет казаться вложенным в макет с правильным стилем (и работает так же, как и в случае, если он работает независимо от SilverStripe).
Спасибо, что уделили время на чтение моего вопроса. Я новичок в изучении React и SilverStripe, и любые ответы будут с благодарностью. Мои извинения, если вопрос запутанный или плохо сформулирован. Еще раз спасибо: -).