渲染曲线模板中的反应组件 -- theming 领域 和 8 领域 drupal 相关 的问题

Render React Components in Twig Templates


4
vote

问题

中文

我在我的主题中使用React JS(通过NPM安装),并使用REST导出视图。我想将JSON视图数据渲染成React组件并在Twig模板中调用它们。

我现在的工作方式是我有js / main.js导入组件,例如:js / components / slider.jsx等。组件文件决定渲染的位置。例如:

   ReactDOM.render(   document.getElementById('elementid') );   

我有一个繁忙的Gulp任务,它捆绑在一起,将ES6 - ES5转换为js / main.js中导入的所有js到js / script.js中,这是js / script.js,这是唯一从主题加载的JS / script.js。我不确定这是否是性能的最佳选择。

也许另一个选项是将每个组件编译(ES6必须转换为ES5)进入它自己的JS文件并将其定义为库,然后可以在Twig模板中调用,然后在Twig模板中调用?

我试图使用 twigrieactdirective ,但我会在说明下获得错误。

是否有更好的选择/方法?

英文原文

I am using React JS in my theme (installed via NPM), and exporting views using REST. I want to render the JSON view data into React components and call them in the twig templates.

The way I have it working now is I have js/main.js importing components eg: js/components/slider.jsx etc. The component files decide where to render. Eg:

 ReactDOM.render(   document.getElementById('elementid') ); 

I have a gulp task running which bundles, transforms ES6 - ES5, and uglifies all the JS imported in js/main.js into js/script.js which is the only JS loading from the theme. I'm not sure if this is the best option for performance.

Maybe another option is to compile each component (ES6 must be transformed to ES5) into it's own JS file and define them as libraries, which can be then called in the twig templates?

I have tried to use TwigReactDirective but I get errors following the instructions.

Are there better options / ways of doing this?

     
   
   

回答列表

2
 
vote
vote
最佳答案
 

完成一些研究后,我发现3个选项可在服务器端呈现反应组件。

  • 使用php v8js扩展运行嵌入式v8引擎
  • 执行Node.js进程按需
  • 运行node.js呈现守护程序以呈现

服务器端呈现有利于初始页面负载的性能。使用v8js扩展名和枝条扩展像 tesonet 似乎是最佳选择我。

v8js安装说明可以找到

一些其他好的尝试选项是:反应渲染器或 symfony-ract-sandbox 或 React Bundle 。 Symfony React Sandbox积分React Bundle。 React Bundle集成了React Renderer。

读取更多这里

 

After doing some research, I found 3 options to render React components on the server side.

  • Use the PHP V8Js extension to run an embedded V8 engine
  • Execute node.js processes on demand
  • Run a node.js rendering daemon for rendering

Rendering on the server side is beneficial for performance of the initial page load. Using the V8Js extension and a twig extension like Tesonet seems like the best option for me.

V8Js installation instructions can be found here

Some other good options to try out are: React Renderer or symfony-react-sandbox or React Bundle. Symfony React Sandbox integrates React Bundle. React Bundle integrates React Renderer.

Read more here

 
 
   
   

相关问题

0  如何在页眉中显示节点图像以获取自定义主题?  ( How to display node image in page header for custom theme ) 
我正在扩展Tweme主题(一个引导映像),我希望节点页面上的"banner_image" 字段显示在标题中。 page.tpl.html模板来自tweme的标记为标题,但这不起作用,因为(我相信......)该模板无法访问 $content 变量: print render($content['field_re...

1  通过以编程方式从菜单树数组渲染自定义菜单块  ( Render custom menu block from menu tree array of links programmatically ) 
在这里是我所拥有的:自定义菜单(侧面导航)模仿主/辅助菜单树,显示了显示根菜单项的整个子树(Dine,Play,Stay)您的整个子树下。 可以使用内容类型中的复选框字段缩短此SidenAV。如果选中,Sidenav将递归显示已选中的页面和所有子项,但省略已检查页面的任何父母。我已成功创建该菜单,这一切都在被...

0  如何在模板中使用缓存和条件渲染?  ( How to work with caching and conditional rendering in a template ) 
我添加了自定义模块函数,以允许 is_front 条件在块模板内工作。目的是在主页上显示网站口号,但不在网站的其余部分。该规则正常运行,但网站的缓存导致它会错误地呈现。如果我从首页清除缓存,则Slogan将显示Sitewide。如果我从另一个站点页面清除缓存,则在首页上不会显示Slogan。 我假设它是因为块的显示在...

3  如何只添加特殊类别,只能仅为某些区域生成的所有块?  ( How can i add special classes to only all blocks thats generated in certain reg ) 
我想向自动在自定义区域生成的每个块中添加一些类。 例如,我想要在侧边栏中生成的所有块 - 左侧有一些特殊类,另外我不想在其他地区的那些块有那些类。 我尝试使用以下代码的内容将所需的类添加到左边栏中生成的每个块: region - sidebar-letth.html.twig {% set cla...

3  如何编辑Misc / print.css而不更改核心  ( How to edit misc print css without changing core ) 
我想编辑书本模块参考的核心/杂项/ print.css,我不知道如何。 如果我应该在某个地方移动print.css并在我的主题中加载新的print.css.info,或者是另一种方式对核心/杂项/ print.css进行更改而无需更改核心? ...

1  如何主题表行链接特定列数据?  ( How to theme table row to link particular column data ) 
我使用以下代码创建了管理部分中的表记录列表。 class userDownloadedFiles extends ControllerBase{ public function userList() { $header = array( array('data' => $this->t('Username'...

1  如何在Page.html.twig中使用jQuery?  ( How do i use jquery in page html twig ) 
在drupal 7中,我使用了一些javascript,在page.tpl.php文件中使用以下代码。 <script type="text/javascript"> (function($) { $( ".mobile-menu-button" ).click(function() { ...

0  如何编写Page.tpl.php标题部分  ( How to write page tpl php header section ) 
我正在使用带有drupal 7.i的引导映像有要求设计标题如下: 我的tpl文件如下所示: <div class = "container"> <div class = "row"> <div class = "col-md-8 col-sm-8 col-xs-12 col-lg-8"> // copy t...

1  为什么我的Drupal 8引导次映像显示搜索结果?  ( Why doesnt my drupal 8 bootstrap subtheme show search results ) 
我有一个引导象形物,我正在使用以下网站 - kobejet.com。 一切看起来并一直正常工作,直到大约2周前,当搜索结果开始只显示数字,没有实际结果。 似乎正在返回结果,因为编号是正确的,因为应该有多少结果。例如,如果您搜索"计算机" - 应该有大约14个结果,但只有编号显示。 我试图越过我的安装,将我的孩子/...

1  模块模板文件以扩展主题  ( Module template file to extend theme ) 
我希望我的模块(事件)拥有自己的模板文件,但扩展了当前启用的基本主题。 hook_theme() : function events_theme($existing, $type, $theme, $path) { return array( 'test_events' => ar...

0  可以以编程方式对主题/渲染视图禁用吗?  ( Can views theme rendering be disabled programmatically ) 
我正在使用默认视图RSS显示和默认情况下创建RSS Feed,它包含一堆使输出为无效XML的字符(我认为这与与双编码或其他相关的视图中的错误有关相关功能)。 所以,解决此问题,在hook_views_pre_render()期间我能够用php来操作字段以输出有效的东西。在视图中我"预览" 输出时,它就像它一样。 但...

1  自定义模板文件以使用主题html / page.tpl [复制]  ( Custom template file to use themes html page tpl ) 
这个问题已经在这里有一个答案: 从hook_menu() (1答) Cl...

-2  将徽标添加到自定义主题作为背景图像  ( Adding logo to a custom theme as background image ) 
我有一个我正在努力的自定义Drupal 8主题。要求是此自定义主题的客户端徽标是HTML对象上的背景图像。我还需要添加脚本,根据页面的其余部分的背景,互换两个不同图像之间使用的背景图像。 在哪里可以在drupal 8自定义主题文件中添加这些CSS样式和JavaScript代码? ...

3  如何在树枝中获取媒体实体字段值?  ( How to get media entity field value in twig ) 
有时需要获得字段的实际值(不是格式化/呈现的字段),例如,要检查 true 或 false 。 如果我想在Twig模板中获取节点或段段落段落( node.html.twig / 段落.html.twig )我可以使用 node.field_my_boolean.value 分别 paragraph.field_my...

1  是否有可能组织模板文件?  ( Is it possible to organize template files ) 
因为我已经更熟悉drupal,我一直越来越多地利用模板文件。但是,模板文件的命名约定使它们难以组织。是否可以将模板文件组织到主要模板目录中的不同目录中?我正在使用drupal 7。 如果它是不可能的,还有替代方法组织模板文件吗? 谢谢! ...

1  为什么“主页内容”块在升级核心后不显示节点内容?  ( Why does the main page content block not display node content after upgrade of ) 
我将Drupal Core升级到8.3.1今天早上。我还在我们的生产网站上升级了在Tools 8.x-1.1,CAPTCHA 8.X-1.0-Beta1等中的模块。 现在,"主页内容" 块不会输出节点内容并输出以下内容: < data-history-node-id="46" class="ds-2col-sta...

2  查看视图中的字段 - 查看Twig模板  ( Access fields in views view twig template ) 
我正在尝试循环通过 rows views-view 模板,但我似乎无法 kint 或 dump 任何东西来帮助我这样做。 我尝试过各种其他答案,例如: 在drupal 8视图中.html.twig文件如何访问视图内容,例如单个字段标题和/或字段内容? 如何获取视图中的每个字段值 - 视图 - 未格式化 - ...

2  如何为新创建的内容具有不同的模板?  ( How can i have different templates for newly created content ) 
我正在使用drupal 7,我需要根据在提交表单后显示最近创建的内容,或者我之后访问URL,我需要为自定义实体显示不同的内容。 有没有办法拥有不同的模板或有没有变量来检查它是否是新创建的内容? 我需要这个,因为我将让用户在从该页面上共享社交网络上的页面,并且在人们之后访问它时,我需要显示不同的内容。 ...

1  如何更改用户注册表单的模板文件?  ( How do i change template file for the user registration form ) 
我想使用不同的模板文件进行注册表,但我不想使用页面 - 用户 - register.html.twig,因为在这种情况下,我应该重写所有页面结构。我们在Drupal 7中有用户register.tpl.php,但我找不到Drupal 8中的主题名称。 ...

0  如何在给定大小的块中显示数据?  ( How to display data in blocks of a given size ) 
是Drupal 8,其在手风琴(模块视图_Accordion)中示出了分类学的条款。默认情况下,模块显示列表。我想在给定大小的块中显示(如图) 在模块文件夹中找到了Twig模板视图 - 手风琴视图.html.twig与以下内容: {% if title %} <h3 class="js-views-ac...




© 2021 it.wenda123.org All Rights Reserved. 问答之家 版权所有


Licensed under cc by-sa 3.0 with attribution required.