跳过内容
必威体育论坛必威精装下载APPRedfin Solutions徽标必威体育论坛必威精装下载APPRedfin Solutions徽标 接触
桌子上的三个监视器

将React应用程序嵌入Drupal 8站点

Dries宣布,Drupal社区中的许多人渴望学习如今的反应React即将到达Drupal

2018年在内德坎普我介绍了如何将您的脚趾浸入将React应用程序嵌入到Drupal框架中(Drupal.tv上的视频)。

这是延迟延续到演示文稿的博客文章。

我们的方法从根本上是这样:

  • 我们想最终可能会在网站上嵌入多个React应用程序,因此我们希望将基本的React库视为整个站点的常见。
  • 我们需要嫁给反应路由和Drupal路由,以便我们可以占据网站的整个“名称空间”
  • 我们希望Drupal存储前端管理的所有实体,因此我们不得不定居存储和API

反应库

我们编写了一个小的react_libraries模块,以公开库的库,以示为我们以为我们在任何地方都会使用并希望在每个站点上保持一致的react。

除了用于模块的.info.yml文件外,模块中唯一的另一件事是库的定义。

#react_libraries.libraries.yml react:js:https://unpkg.com/react@16/umd/react.production.min.js:外部:true https://unpkg.com/React-com/react-dom@16/umd@16/umdemd/react-dom.production.min.js:外部:true react-dev:js:https://unpkg.com/react@16/umd/react.development.js:true https:// https://unpkg.com/reeact-dom@16/umd/reaeact-dom.development.js:外部:true

所有这些都是吸入CDN的库,包括Prod(React)版本和Dev(React-Dev)版本。

我们的较小应用仅取决于此模块,然后根据需要附加react_libraries/react(-dev)库(下一步您将看到)。

学到的一个教训是我们从创建反应应用,为了做这项工作,我们必须喷射从中删除通常在构建应用程序捆绑包中的库。下次,我们将从划痕中构建应用程序,而不是使用脚手架。

路由

React Apps的工作方式是,他们通过使用JavaScript更改URL来处理路由,并允许该应用程序处理该路线的操作。但是,由于页面没有令人耳目一新,这只是通往Drupal的一条途径。当用户将URL书签并期望它起作用(应该)时,问题出在问题。为了处理这种情况,我们通过声明在路由中假设一个“名称空间”/my-react-app/*属于我们的React应用程序。在Drupal 7中,这将“刚刚起作用”,因为任何登记的自动选择的路径都会出现在URL之后的所有内容,只是对路线的参数。在Drupal 8中,这不再是正确的,因此我们必须采取伪造的旧行为。

为此,我们需要一个自定义模块。作为该模块的一部分,我们可以定义路由 - 并告诉我们的路由是传递单个参数({react_route}),我们将该参数的默认值设置为“如果没有传递”(即,您单独导航到 /my-react-app)。

#my_react_app.routing.yml my_react_app.overview:path: /my-react-app /{react_route}默认值:_controller:_controller:\ drupal \ my_react_app_app \ myreactappcontroller :: everveie_tit app apple:'react:''''''''re react:

但是,a-这与路径不符/my-react-app/pathPart1/pathPart22- 所以这还不完整。

接下来,我们需要创建一个入站路径处理器,通过在我们的模块的SRC/ PathProcessor/文件夹中删除新类。

名称空间drupal \ my_react_app \ pathProcessor;使用Drupal \ Core \ PathProcessor \ InboundPathProcessorInterface;使用Symfony \ Component \ httpFoundation \ request;类MyreActAppPathProcessor实现InboundPathProcessorInterface {public function processInbound($ path,request $ request){if(strepos($ path($ path,'/my-react-app/'')my-react-app \/|','',$ path);$ names = str_replace('/',':',$ names);返回“/savant-tools/$ names”;}返回$路径;}}}

上面的代码所做的是剥离我们路由的“名称空间”部分,然后用结肠替换所有前向斜线,以使其作为单个路由参数。本质上,PHP无论如何都将其抛弃,因为这是将在JavaScript中使用此路线信息的前端。

控制器

最后的丢失作品是 - 嗯,当我们在我的反应范围内击中任何东西时,Drupal实际上为标记提供了什么?这是由您的路由文件所指的控制器定义的。您的路由类放在模块的SRC/Controller文件夹中。

<?php namespace drupal \ savant_tools \ controller;使用Drupal \ Core \ Controller \ ControllerBase;/***我的React应用程序控制器。* / class myreatctappController扩展了ContrancterBase { / ***呈现React应用程序。* @return数组 *渲染数组。*/ public函数概述(){$ build = [];// @todo-在这里做dev / prod。( /react或 /react-dev)//理想情况下,以某种方式使此可配置。$ build ['#附件'] ['库'] [] ='react_libraries/react-dev';//这是您从//模块附加包含非reactct-libraries code $ build ['#附件'] ['] ['library'] [] ='my_react_app/muthateapp'的地方。 // Finally, drop your main mount point for React. // This ID can be whatever you use in your app. $build['#markup'] = '
'; return $build; } }

鳍!

在这一点上,您现在可以自由地编写整个光滑的前端!

要提到的最后一件事,另一个替代方法是将React应用程序挂载到节点上。使用JD Flynn的模块React Mount节点您可以简单地指定一个节点,DIV ID和您在其中的React应用程序中注册的库。您需要完全捆绑的反应,或者您需要在每一页或其他某些机构上附加react_libraries,并且路由并没有那么多优雅 - 但是,如果您有更简单的需求,这是一种很好的方法去!

Baidu