Symfony UX React

编辑此页

Symfony UX React 是一个 Symfony 扩展包，用于在 Symfony 应用程序中集成 React。它是 Symfony UX 倡议的一部分。

React 是一个用于构建用户界面的 JavaScript 库。Symfony UX React 提供了从 Twig 渲染 React 组件的工具，处理渲染和数据传输。

你可以在 Symfony UX React 演示页面上看到这种集成的实时示例。

Symfony UX React 支持 React 18+。

安装

注意

这个包最好与 WebpackEncore 一起使用。要与 AssetMapper 一起使用，请参阅与 AssetMapper 一起使用。

使用 Composer 和 Symfony Flex 安装扩展包

        1
        $ composer require symfony/ux-react
    

Flex 配方将自动为你设置好一切，例如在你的 webpack.config.js 文件中添加 .enableReactPreset()，并在 assets/app.js 中添加代码来加载你的 React 组件。

接下来，安装一个辅助 React 的包

        1
2
        $ npm install -D @babel/preset-react --force
$ npm run watch
    

就是这样！现在可以将在 assets/react/controllers/ 目录中的任何文件渲染为 React 组件。

用法

注册组件

Flex 配方已经将 registerReactControllerComponents() 代码添加到你的 assets/app.js 文件中

        1
2
3
4
        // assets/app.js
import { registerReactControllerComponents } from '@symfony/ux-react';

registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));
    

这将加载位于 assets/react/controllers 目录中的所有 React 组件。这些组件被称为 **React 控制器组件**：旨在从 Twig 渲染的顶层组件。

在 Twig 中渲染

你可以在你的 Twig 模板中使用 react_component() 函数来渲染任何 React 控制器组件。

例如

        1
2
3
4
5
6
        // assets/react/controllers/Hello.jsx
import React from 'react';

export default function (props) {
    return <div>Hello {props.fullName}</div>;
}
    

        1
2
3
4
5
6
7
8
9
10
11
        {# templates/home.html.twig #}
{% extends 'base.html.twig' %}

{% block body %}
    <div {{ react_component('Hello', { fullName: 'Fabien' }) }}>
        Loading... <i class="fas fa-cog fa-spin fa-3x"></i>
    </div>

    {# Component living in a subdirectory: "assets/react/controllers/Admin/OtherComponent" #}
    <div {{ react_component('Admin/OtherComponent') }}></div>
{% endblock %}
    

永久组件

2.21

在 UX React 2.21 中添加了将组件标记为 permanent 的功能。

可以配置负责渲染 React 组件的控制器，以便在从根元素中移除时保持 React 组件的挂载状态
DOM，使用 permanent 选项。

当组件的根元素在 DOM 中移动，或者被移除并立即重新添加到 DOM 时，这尤其有用（例如，当使用
Turbo 及其 `data-turbo-permanent` 属性时）。

        1
2
3
4
5
6
7
        {# templates/home.html.twig #}
{% extends 'base.html.twig' %}

{# The React component will stay mounted if the div is moved in the DOM #}
<div {{ react_component('Hello', {fullName: 'Fabien'}, {permanent: true}) }}>
     Loading...  
</div>
    

与 AssetMapper 一起使用

因为 JSX 格式不是纯 JavaScript，所以将此库与 AssetMapper 一起使用需要一些额外的步骤。

将你的 .jsx 文件编译为纯 JavaScript 文件。这可以通过安装 Babel 和 @babel/preset-react 预设来完成。示例：https://github.com/symfony/ux/blob/2.x/ux.symfony.com/assets/react/build/package.json
将此库指向包含最终 JavaScript 文件的 "built" 控制器目录

        1
2
3
        # config/packages/react.yaml
react:
    controllers_path: '%kernel.project_dir%/assets/build/react/controllers'
    

此外，在你的 .jsx 文件中，当导入另一个组件时，请使用 .js 扩展名

        1
2
        // use PackageList.js even though the file is named PackageList.jsx
import PackageList from '../components/PackageList.js';
    

向后兼容性承诺

此扩展包旨在遵循与 Symfony 框架相同的向后兼容性承诺：http://symfony.ac.cn/doc/current/contributing/code/bc.html

这项工作，包括代码示例，均根据 Creative Commons BY-SA 3.0 许可协议获得许可。

版本