React 组件在 symfony 7 中的显示

Question

我按照 Symfony 文档安装了带有 React 的 Symfony 7，但在正面除了“正在加载...”之外没有显示任何值，我查看了问题可能出在的所有地方。我编译时没有错误，控制台也没有错误......

我的文件package.json

    {
    "devDependencies": {
        "@babel/core": "^7.17.0",
        "@babel/preset-env": "^7.16.0",
        "@babel/preset-react": "^7.24.1",
        "@hotwired/stimulus": "^3.0.0",
        "@hotwired/turbo": "^7.1.1 || ^8.0",
        "@symfony/stimulus-bridge": "^3.2.0",
        "@symfony/ux-react": "file:vendor/symfony/ux-react/assets",
        "@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/assets",
        "@symfony/webpack-encore": "^4.0.0",
        "autoprefixer": "^10.4.19",
        "core-js": "^3.23.0",
        "postcss": "^8.4.38",
        "postcss-loader": "^7.3.4",
        "regenerator-runtime": "^0.13.9",
        "tailwindcss": "^3.4.3",
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0",
        "webpack-notifier": "^1.15.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    },
    "dependencies": {
        "prop-types": "^15.8.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
    }
}

我的jsx文件位于assets/react/controllers/Hello.jsx

 import React from 'react';

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

我在 webpack.config.js 中激活了它 启用ReactPreset()

index.html.twig

 {% extends 'base.html.twig' %}

{% block title %}Hello HomeController!{% endblock %}

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

我的文件app.js位于assets/app.js中

    import './styles/app.css';
import { registerReactControllerComponents } from '@symfony/ux-react';
registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));

感谢您的帮助。

Answer 1

我有同样的问题，我尝试在 symfony 6 上安装 symfony ux/react，它可以工作。 我认为 symfony 7 与 symfony ux/react 不匹配。 如果有人有解决方案？ 🙏