如何使来自 React 应用程序的 SVG 构建文件在 SilverStripe 4 页面布局中可用？

Question

我有一个名为 react-app 的 React 应用程序嵌套在我的 SilverStripe 4 项目的一个页面中。目前它以无法使用的形式出现，其中 none 的 CSS 样式按预期工作，并且该特定页面的 SilverStripe 布局发生了奇怪的事情（例如，不可滚动的横幅填满了整个页面）。

这个问题与我之前提出的一个问题相关，Robbie Averill = ().

给出了很好的回答

当我使用命令 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 函数和要求 class 从 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 class extends Page.php class。Page.ss 的布局包括一个简单的导航栏、header 和 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 标题（不是全部）的纯文本。我可以使用无样式的 drop-down 菜单进行交互。这证实了某些 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/static/media

预期结果：

打开带有嵌套 react-app 的 SilverStripe 页面时，该页面保留了正确的 SilverStripe 样式和布局。 react-app 将以正确的样式嵌套在布局中（并且像运行独立于 SilverStripe 时那样工作）。

感谢您花时间阅读我的问题。我是 React 和 SilverStripe 的新手，非常感谢任何回复。如果问题令人困惑或措辞不当，我深表歉意。再次感谢 :-).

Answer 1

我决定从页面中完全删除 <% include Banner %>，因为它的行为很奇怪。我不能只用 HTML 风格的评论来评论它，因为 ReactAppPage.ss 是一个 SilverStripe 页面而不是真正的 HTML。

我发现了为什么 SilverStripe 会运行注释掉的关键字。 HTML 样式注释仍然发送到浏览器。我改成SilverStripe评论<%-- --%>:
- 研究：SilverStripe3: Multiline comments in template

现在我可以按预期看到反应应用程序并按预期工作。

SilverStripe CSS 还发生了其他一些奇怪的事情，这意味着该页面不像其他页面那样滚动。浏览器中的 chrome 开发工具使我能够确定该页面上发生的问题，然后对代码进行调整。我能够重新引入与其他页面外观几乎相同的横幅。这不是最好的解决方案，因为必须创建一个带有内联样式的页面特定横幅来覆盖损坏的内容。

我的后续问题是：

在 SilverStripe 项目内的媒体文件夹中找到文件的正确位置（而不是在 www/static/media 的 SilverStripe 项目外部）。

因为我正在学习 SilverStripe 课程（将静态网站分割成 SilverStripe 项目），所以我认为其中一些问题可能会通过继续课程得到解决。非常感谢收到任何建议。

如何使来自 React 应用程序的 SVG 构建文件在 SilverStripe 4 页面布局中可用？

How to make SVG build files from a React app available in a SilverStripe 4 page layout?

reactjs

silverstripe-4