Question

我在SilverStripe 4项目的页面中嵌套了一个名为react-app的React应用程序。当前，它以无法使用的形式出现，没有一种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项目中？我不能使用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

下图显示了使用init函数和Requirements类从react-app构建文件中引入JavaScript和CSS文件的CircleAppPageController.php文件。注意：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 / 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

现在我可以看到react-app可以正常运行了。

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

我仍然遇到的问题是：

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

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

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

1 个答案: