reactjs - 如何将现有的 React 应用程序（只是没有后端的 UI）插入（注入？）到 SilverStripe 页面布局中？

问题描述

我的问题是：我一直在阅读 SilverStripe 4 文档，以便找到一种将现有 React 应用程序（只是没有后端的嵌套 React 组件的 UI）插入 SilverStripe 页面布局的方法。这可能吗？您如何确保 SilverStripe 具有正确的依赖关系？

到目前为止，我的研究试图回答这个问题：作为一个传统的 React 项目使用 NPM（节点包管理器）来获取所有正确的依赖项并将 Node.js 作为服务器，我想知道如何解决这个问题，因为我的 SilverStripe 项目运行在阿帕奇服务器。我找到了这个包，我需要将它添加到我的项目中吗？ 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，如果是这种情况，我的问题也可能令人困惑或措辞不当，非常抱歉。再次感谢：-）。

标签： reactjssilverstripe-4

reactjs - 如何将现有的 React 应用程序（只是没有后端的 UI）插入（注入？）到 SilverStripe 页面布局中？

问题描述

解决方案

推荐阅读