如何在 Wordpress 页面上呈现 React？

Question

我正在尝试让 React 应用程序呈现为 Wordpress 页面的一部分。

我使用 create-react-app 创建了我的应用程序并添加了

"homepage": "."

到 package.json 之前构建。

起初我通过在标准 html 文档中嵌入必要的核心文件来试用该功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<div id="wp-root"></div>

<script src="runtime-main.363857b3.js"></script>
<script src="main.ef284662.chunk.js"></script>
<script src="2.319ef205.chunk.js"></script>

</body>
</html>

果然成功了！

在使用 Wordpress 时，我查询了 functions.php 中的脚本文件。

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/test.js', true);
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/2.319ef205.chunk.js', true);
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/main.ef284662.chunk.js', true);
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/runtime-main.363857b3.js', true);

我还在同一文件夹中查询了一个简单的测试脚本 alert("test") 以确保它正在响应。

我的测试脚本按预期在每个页面上触发，所以我继续在页面上包含我的 <div id="wp-root">，为了科学，在 body-tag[=20 下的 header.php =]

我的测试脚本有效，我的 React 构建在 index.html 测试中有效。

为什么 Wordpress 不呈现它？

创建反应应用程序：3.4.1
WordPress: 5.5.3
主题：Blankslate

Answer 1

成功了！

如果我将脚本从远程主机直接加载到 footer.php 就在 </header> 之前，它会完美地工作！

<?php wp_footer(); ?>
<script src="http://localhost/react_app/build/static/js/runtime-main.363857b3.js"></script>
<script src="http://localhost/react_app/build/static/js/main.ef284662.chunk.js"></script>
<script src="http://localhost/react_app/build/static/js/2.319ef205.chunk.js"></script>
</body>

我也试过成功导入React CDN，但并没有解决问题。

这可能是 wp_enqeue_scripts 工作方式的问题。在这种情况下，它只是忽略了 test.js

之外的所有脚本

如何在 Wordpress 页面上呈现 React？

How do I render React on Wordpress page?

javascript

wordpress

reactjs

create-react-app