【发布时间】：2019-09-08 07:01:31
【问题描述】：
我的问题是： 我一直在阅读 SilverStripe 4 文档，以便找到一种将现有 React 应用程序（只是没有后端的嵌套 React 组件的 UI）插入 SilverStripe 页面布局的方法。这可能吗？您如何确保 SilverStripe 具有正确的依赖关系？
到目前为止，我的研究试图回答这个问题： 由于传统的 React 项目使用 NPM（节点包管理器）来获取所有正确的依赖项并将 Node.js 作为服务器，我想知道如何在我的 SilverStripe 项目在 Apache 服务器上运行时处理这个问题。我找到了这个包，我需要将它添加到我的项目中吗？ https://www.npmjs.com/package/@silverstripe/webpack-config
我遇到的最接近的是一篇关于在 SilverStripe 项目中包含 React 组件的文章，其中讨论了自定义 CMS 的管理界面。我想在网站的公共页面上显示 React 组件。 https://docs.silverstripe.org/en/4/developer_guides/customising_the_admin_interface/reactjs_redux_and_graphql/
在文章中提到了一个客户端框架，它有自己的依赖注入实现，称为 Injector。我找不到关于此的其他文档。
我有一个 PageController 类，它目前只有与 SilverStripe 相关的要求（JavaScript 和 css）。这是按照 SilverStripe 第 1 -4 课完成的。
<?php
namespace {
use SilverStripe\CMS\Controllers\ContentController;
use SilverStripe\View\Requirements;
class PageController extends ContentController
{
private static $allowed_actions = [];
protected function init()
{
parent::init();
// You can include any CSS or JS required by your project here.
// See: https://docs.silverstripe.org/en/developer_guides/templates/requirements/
Requirements::css('css/bootstrap.min.css');
Requirements::css('css/style.css');
Requirements::javascript('javascript/common/modernizr.js');
Requirements::javascript('javascript/common/jquery-1.11.1.min.js');
Requirements::javascript('javascript/common/bootstrap.min.js');
Requirements::javascript('javascript/common/bootstrap-datepicker.js');
Requirements::javascript('javascript/common/chosen.min.js');
Requirements::javascript('javascript/common/bootstrap-checkbox.js');
Requirements::javascript('javascript/common/nice-scroll.js');
Requirements::javascript('javascript/common/jquery-browser.js');
Requirements::javascript('javascript/scripts.js');
}
}
}
我还有一个扩展 PageController 类的 ReactPageController 类。我是否在此处包含 React 的要求（依赖项？）？
<?php
namespace SilverStripe\Lessons;
use PageController;
class ReactPageController extends PageController
{
//include another init method here?
}
?>
然后我需要以某种方式在 ReactPage.ss 的布局中注入 React 组件（'ReactPage.php' 类扩展了 'Page.php' 类）。注意：Page.ss 的布局包括 ReactPage.ss 将继承的简单导航栏、页眉和页脚。
ReactPage.ss 模板
<!-- BEGIN CONTENT -->
<div class="content">
<div class="container">
<div class="row">
<div class="main col-sm-8">
<div>
<!-- INSERT REACT CONTENT HERE:replace Hello World!-->
<h1>Hello World!</h1>
</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 -->
结果将是一个页面，其中不是硬编码的“Hello World！”，而是一个根组件，其中嵌套了很多组件。嵌套的 React 应用与独立的 React 应用具有相同的功能。
感谢您抽出宝贵时间阅读我的长问题。任何回应将不胜感激。我只是在学习 React 和 SilverStripe，如果是这种情况，我的问题也可能令人困惑或措辞不当。再次感谢:-)。
【问题讨论】：