如何在基于Twig模板的非React项目中使用React开发组件？

完全没问题——你可以把React组件打包成独立的可复用模块，然后在Twig模板里像引入普通脚本一样使用它。结合你有全React项目经验的背景，这个过程会很顺手，下面是具体的实现步骤：

1. 编写React版的AsideButtons组件 #

先把你原来的Twig+jQuery逻辑转换成React组件，用函数组件的写法更简洁：

// src/AsideButtons.jsx
import React from 'react';

const AsideButtons = ({ links }) => {
  const handleClick = (e, text) => {
    e.preventDefault();
    console.log(text);
  };

  // 支持外部传入链接列表，默认用你原来的链接
  const defaultLinks = [
    { text: 'Home', href: '#' },
    { text: 'Twitter', href: '#' },
    { text: 'FB', href: '#' },
    { text: 'Youtube', href: '#' },
  ];

  const buttonLinks = links || defaultLinks;

  return (
    <div className="aside-buttons">
      {buttonLinks.map((link) => (
        <a
          key={link.text}
          href={link.href}
          onClick={(e) => handleClick(e, link.text)}
        >
          {link.text}
        </a>
      ))}
    </div>
  );
};

// 暴露全局变量，方便Twig模板调用
window.AsideButtons = AsideButtons;
export default AsideButtons;

2. 把组件打包成UMD格式 #

用Vite或者Webpack把组件打包成UMD模块（这种格式可以在浏览器里直接通过全局变量访问），以Vite为例，配置vite.config.js：

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: 'src/AsideButtons.jsx',
      name: 'AsideButtons',
      formats: ['umd'],
      fileName: (format) => `aside-buttons.${format}.js`,
    },
    rollupOptions: {
      // 排除React和ReactDOM，可选择全局引入或打包时包含
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
});

运行npm run build后，会生成dist/aside-buttons.umd.js文件，把这个文件放到你的项目静态资源目录里。

3. 在Twig模板中引入并使用组件 #

在需要使用这个组件的Twig模板里，做三件事：

• 引入React和ReactDOM（可以用CDN或者本地静态资源）
• 引入打包后的组件脚本
• 留一个DOM容器，然后初始化React组件

{# 示例：在需要的Twig模板中引入 #}
<script src="/static/js/react.production.min.js"></script>
<script src="/static/js/react-dom.production.min.js"></script>
<script src="/static/js/aside-buttons.umd.js"></script>

{# 挂载组件的容器 #}
<div id="aside-buttons-root"></div>

<script type="text/javascript">
  // 初始化React组件
  const root = ReactDOM.createRoot(document.getElementById('aside-buttons-root'));
  root.render(React.createElement(window.AsideButtons));
</script>

如果需要动态传参（比如自定义链接列表），可以在Twig里把数据转成JSON传给组件：

{% set customLinks = [
  { text: 'Dashboard', href: '/dashboard' },
  { text: 'Profile', href: '/profile' }
] %}

<script type="text/javascript">
  const links = {{ customLinks|json_encode|raw }};
  root.render(React.createElement(window.AsideButtons, { links: links }));
</script>

额外注意点 #

• 样式处理：如果组件有自定义样式，可以把样式打包成单独的CSS文件，在Twig里用<link>标签引入；也可以用CSS Modules或styled-components，只要打包时正确输出样式即可。
• 减少依赖：既然用了React，尽量用React的事件系统（比如上面的onClick）代替jQuery，减少不必要的依赖，也更符合React的开发模式。
• 多组件管理：如果后续要开发更多React组件，可以统一打包成一个UMD文件，或者单个组件单独打包，根据项目需求灵活选择。

这样你就能在Twig主导的项目里，用React开发复杂组件，同时保留原有Twig模板的渲染逻辑啦！

内容的提问来源于stack exchange，提问作者Den Gas