reactjs - 如何使来自 React 应用程序的 SVG 构建文件在 SilverStripe 4 页面布局中可用?
问题描述
我有一个名为react-app
嵌套在 SilverStripe 4 项目的页面中的 React 应用程序。目前,它以无法使用的形式出现,没有任何 CSS 样式按预期工作,并且该特定页面的 SilverStripe 布局发生了奇怪的事情(例如,不可滚动的横幅填充了整个页面)。
这个问题与我之前提出的一个问题有关,该问题从 Robbie Averill 那里得到了很好的回答 =(如何将现有的 React 应用程序(只是一个没有后端的 UI)插入(注入?)到 SilverStripe 页面布局中?)。
当我使用该命令npm run build
在 中生成构建文件时react-app
,会创建一个media
构建文件夹,其中包含不是 JavaScript 或 CSS 的文件。如何将此build/static/media
文件夹从内部react-app
带入我的 SilverStripe 项目?我不能使用Requirements class
(of 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
react-app
下面显示了 CircleAppPageController.php 文件,它使用 init 函数和 Requirements 类从构建文件中引入 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) 通过复制 build/static/media 文件夹中的内容react-app
并将其移动到我的 SilverStripe 项目之外的 static/media 文件夹中,SilverStripe 将找到并运行这些文件,但这不会改变屏幕上的结果。
即从以下位置复制文件夹内容:
- www/my-silverstripe-project/app/react-app/build/static/media
到新创建的文件夹:
- www/静态/媒体
预期成绩:
在打开带有嵌套的 SilverStripe 页面时react-app
,页面会保留正确的 SilverStripe 样式和布局。react-app
它将以正确的样式嵌套在布局中(并且像独立于 SilverStripe 运行时一样工作)。
感谢您花时间阅读我的问题。我是学习 React 和 SilverStripe 的新手,任何回复都将不胜感激。如果问题令人困惑或措辞不当,我深表歉意。再次感谢 :-)。
解决方案
我决定从页面中完全删除 <% include Banner %> ,因为它的行为很奇怪。我不能只用 HTML 样式的注释将其注释掉,因为 ReactAppPage.ss 是 SilverStripe 页面而不是真正的 HTML。
我发现了为什么 SilverStripe 运行注释掉了关键字。HTML 样式的注释仍然发送到浏览器。我改为 SilverStripe 评论
<%-- --%>
:
现在我可以看到 react-app 按预期工作并按预期工作。
SilverStripe CSS 发生了其他一些奇怪的事情,这意味着页面不像其他页面那样滚动。浏览器中的 chrome 开发工具使我能够确定该页面上发生的问题,然后对代码进行调整。我能够以与其他页面几乎相同的外观重新引入横幅。不是最好的解决方案,因为必须使用内联样式创建页面特定的横幅来覆盖被破坏的内容。
我的持续问题是:
- 在 SilverStripe 项目内(而不是位于 www/static/media 的 SilverStripe 项目外)的媒体文件夹中找到文件的正确位置。
因为我正在学习 SilverStripe 课程(将静态网站划分为 SilverStripe 项目),所以我认为其中一些问题可以通过继续课程来解决。任何建议都非常感激。
推荐阅读
- pgadmin - pgadmin4 查询工具中奇怪的行缩进,如何解决?
- arrays - 如何正确分配不是从索引 1 开始的数组范围到 excel 范围?
- go - Arithmetic on uint8, int8
- java - Java中的重复文件通道
- linux - 如何将linux系统文件覆盖到yocto文件系统中?
- ios - 在表视图控制器中列出计划的通知
- javascript - Indexeddb游标等待响应?
- php - 使用 getStaticProperties 和 getStaticPropertyValue ReflectionClass 函数的静态变量的可见性问题
- c - setenv() 与 putenv() - 哪个用于跨平台环境编辑?
- reactjs - 使用 React Hooks 时来自 ESLint 的警告消息