alexk / craft-react
CraftCMS 的客户端和服务器端 React 渲染
Requires
- craftcms/cms: ^3.0
- limenius/react-renderer: ^2.1.0
README
Craft CMS React 渲染器允许你在 Craft CMS 项目中实现 React.js 的客户端和服务器端渲染。
它是 CraftCMS 的 ReactBundle 实现。有关核心功能、客户端示例以及与渲染器本身相关的问题的完整文档,请查看 ReactBundle 或 Symfony React Sandbox。
为什么选择服务器端渲染?
通过在服务器上渲染你的 React 组件,你不仅提高了性能和搜索引擎的可读性,从而提升了 SEO,还允许那些连接较慢的用户在客户端包完全加载之前访问你的信息。
工作原理
请查看 教程,了解此插件客户端和 twig 端的逐步解释。对于 JSON-API,我们推荐使用 Craft CMS 的 Elements API。
安装
要安装插件,请按照以下说明操作
-
打开你的终端并进入你的 Craft 项目
cd /path/to/project
-
然后告诉 Composer 加载插件
composer require alexk/craft-react
在控制面板中,转到设置 → 插件,并为 Craft React 点击“安装”按钮。
设置
在插件设置中,添加以下条目
环境: "client_side","server_side" 或 "both"
服务器包: "PATH_TO_SERVER_BUNDLE"
或全局覆盖 config/react.php
中的设置
<?php return [ 'env' => 'client_side', 'serverBundle' => 'app/server-bundle.js', ];
在你的模板中,添加以下 TWIG 函数,你希望在其中渲染你的 React 应用程序的位置
{{ react_component('MyApp', {'props': {entry: entry}}) }}
在 props 中,传递你想传递给根组件的任何 props。
序列化
为了将条目序列化以创建 store 或 props,引入了新的 twig 函数 serialize(entry, schema = 'entry', group = 'default')
。这允许你创建一个 PHP 文件来序列化你的条目。文件应位于 config/react
目录中,并命名为 [schema].php
。如果未指定,则默认为 entry.php
,组为 default
。
<?php # config/react/entry.php use craft\elements\Entry; return [ 'default' => function(Entry $entry){// named after the group return [ 'id' => $entry->id, 'title' => $entry->title, 'customField' => $entry->customField, ]; } ];
在 twig 中使用它,只需传递当前条目并在你的 store 中使用结果即可
{# _entry.twig #} {% set serializedBlogPost = serialize(entry,'blog', 'detail') %} {{ react_component('MyApp', {'props': {blogpost: serializedBlogPost}}) }}
这将使用 config/react/blog.php
文件
<?php # config/react/blog.php use craft\elements\Entry; return [ 'detail' => function(Entry $entry){ return [ 'id' => $entry->id, 'title' => $entry->title, 'content' => $entry->content,// custom field ]; } ];