【发布时间】：2019-05-01 01:54:41
【问题描述】：
我有一个名为 react-app 的 React 应用程序嵌套在我的 SilverStripe 4 项目的一个页面中。目前，它以无法使用的形式出现，没有任何 CSS 样式按预期工作，并且该特定页面的 SilverStripe 布局发生了奇怪的事情（例如，无法滚动的横幅填充了整个页面）。
这个问题与我之前提出的问题有关，Robbie Averill = (How to insert (inject?) an existing React app (just a UI without a backend) into a SilverStripe page layout?) 给出了很好的回答。
当我使用命令npm run build 在react-app 中生成构建文件时，会创建一个media 构建文件夹，其中包含不是JavaScript 或CSS 的文件。如何将 build/static/media 文件夹从 react-app 带入我的 SilverStripe 项目？我不能使用（SilverStripe 的）Requirements class，因为它只处理 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 类从 react-app 构建文件中引入 JavaScript 和 CSS 文件。注意：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 方面正在工作，但页面仍然不可用。 SilverStripe 主题 CSS 文件能否覆盖来自 react-app 构建文件的 CSS 文件？
2) 通过复制 react-app 中的 build/static/media 文件夹的内容并将其移动到我的 SilverStripe 项目之外的 static/media 文件夹中，SilverStripe 将找到并运行这些文件，但这不会改变屏幕上的结果。
即从以下位置复制文件夹内容：
- www/my-silverstripe-project/app/react-app/build/static/media
到一个新创建的文件夹：
- www/静态/媒体
预期结果：
在打开带有嵌套 react-app 的 SilverStripe 页面时，页面会保留正确的 SilverStripe 样式和布局。 react-app 将以正确的样式嵌套在布局中（并像独立于 SilverStripe 运行时一样工作）。
感谢您抽出宝贵时间阅读我的问题。我是学习 React 和 SilverStripe 的新手，任何回复都将不胜感激。如果问题令人困惑或措辞不当，我深表歉意。再次感谢:-)。
【问题讨论】：
-
目前正在研究这个：forum.silverstripe.org/t/adding-svg-to-the-allowed-files-in-ss4/…。大多数媒体文件都是 SVG 文件，所以希望我能在这里得到答案。