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

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

这个问题与我之前提出的一个问题有关，这个问题得到了Robbie Averill =(如何将现有的React应用程序(只是一个没有后端的UI)插入(注入？)到SilverStripe页面布局中？)。

当我使用命令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 SilverStripeLessons;
use SilverStripeViewRequirements;
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) 通过将 build/static/media 文件夹的内容复制到react-app中，并将其移动到我的 SilverStripe 项目之外的静态/媒体文件夹，SilverStripe 将找到并运行这些文件，但这不会更改屏幕上的结果。

即从以下位置复制文件夹内容：

www/my-silverstripe-project/app/react-app/build/static/media

到新创建的文件夹：

www/static/media

预期成果：

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

感谢您花时间阅读我的问题。我是学习 React 和 SilverStripe 的新手，任何回应将不胜感激。如果问题令人困惑或措辞不当，我深表歉意。再次感谢：-)。

我决定从页面中完全删除包含横幅 %> 的 <%，因为这行为很奇怪。我不能只用HTML样式的注释来注释它 ReactAppPage.ss 因为它是一个SilverStripe页面，而不是真正的HTML。

我发现了为什么SilverStripe运行注释掉了关键字。HTML 样式注释仍会发送到浏览器。我改为银条评论<%-- --%>：
- 研究：银条3：模板中的多行注释

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

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

我继续的问题是：

在 SilverStripe 项目内的介质文件夹中查找文件的正确位置(而不是 SilverStripe 项目外部的 www/static/media)。

因为我正在学习SilverStripe课程(将静态网站划分为SilverStripe项目)，所以我认为其中一些问题可以通过继续课程来解决。任何建议都感激地收到。

相关内容

最新更新

热门标签：