因此，从常规 Drupal 控制器层或 Drupal 8 的树枝模板中调用 React 应用程序并没有真正的好方法。

人们通常有两种方式将 React 应用程序连接到 D8。

选项 1 - 逐步解耦站点 - 这就是 Drupal 仍然使用 TWIG 引擎生成绝大多数站点视图的地方，并且可以在站点的一小部分使用 React，同时通过基于 Drupal 的 Web 服务与 Drupal 通信。查看此项目以获取更多信息 - https://www.drupal.org/project/pdb。如果您只想添加一个基于 React 的小小部件，但又想保留大部分站点使用标准 TWIG，那么这是一个不错的选择。

选项 2 - 完全解耦站点 - 这是您使用 React 100% 渲染应用程序视图层的地方，并且只需将 Drupal 用作提供 Web 服务的 CMS。webservice 部分有多个选项，包括https://www.drupal.org/project/graphql和https://www.drupal.org/docs/8/api/restful-web-services-api/restful-web -services-api-overview。因此，一个示例是在静态服务器上提供 create-react-app 并通过 Web 服务与 D8 通信。

以下是一些可能有助于指导您做出决定的附加信息。 https://dri.es/how-to-decouple-drupal-in-2018

祝你好运！

带有一些假设的长篇文章（但它有效）：我正在寻求实现相同的目标（Drupal 8 和 react 解耦块），我搜索并搜索，我发现自己不止一次返回此页面，所以我将离开这个小我在这里发现的东西。 我的假设：

• 您已经创建了一个具有自己的树枝模板的自定义块。
• 您已经在您的库文件中定义了您的库（我们将对此进行审查）
• 你已经在你的module的根文件夹中创建了你的 React 应用程序npx create-react-app my-app。

create-react-app my-app在 my-app 文件夹中创建一个react应用程序，我的应用程序包含所有react代码和配置。为了让我们的应用程序（自定义 react js 库）与 drupal 一起运行良好，我们需要覆盖一些东西，比如重命名我们的文件的脚本（构建命令），到一些 drupal 可以识别（识别）和加载的东西。运行yarn add react-app-rewired --dev，下载react app rewire，让我们覆盖默认的 react-app 配置而不必弹出我们的应用程序。在 react-app 文件夹的根目录中，创建一个名为 config-overrides.js 的文件，其中应包含以下代码

module.exports = function override(config, env) {

  config.optimization.runtimeChunk = false;
  config.optimization.splitChunks = {
    cacheGroups: {
      default: false
    }
  };

  return config;
};

并将 package.json 中的脚本编辑为

"build": "react-app-rewired build && yarn run build:dist",
"build:dist": "cd build && copy static\\js\\*.js main.js && copy static\\css\\*.css main.css",

注意：我已经编辑了 build 命令并添加了 build:dist 脚本（但是，如果不是在 Windows 上，请在 build:distcopy中用cp和\\with替换/）。这将确保每次运行构建脚本时，您的构建文件将被重命名为 main.js 和 main.css，而没有文件名..js/css，然后我们可以在我们的 libraries.yml 文件中引用它们。

我的 modulename.libraries.yml 看起来像这样（文件名 = modern_js_drupal.libraries.yml）

react_local:
  version: 1.x
  js:
    my-app/build/main.js: {}
  css:
     layout:
       my-app/build/main.css: {}

和我的 block.html.twig

<div class="row">
  <div id="root">
    <h4>React App</h4>
</div>

{{ attach_library('modern_js_drupal/react_local') }}

我将我的 div 命名为“root”而不是其他任何东西的原因是因为 react app 在呈现您的应用程序时使用相同的 id。查看 react_js/public/index.html 和 react_js/src/index.js。index.html 提供了将我们的应用程序连接到的 div 并且 index.js 在提供的 div 上呈现应用程序 ( ReactDOM.render(<App />, document.getElementById('root'));)，在开发过程中这样做的好处是，您可以创建您的应用程序并立即在您的应用程序上查看更改 ( http: //localhost:3000/），您可以稍后运行yarn build以查看您的 drupal 8 站点上的最新更改。