亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 WordPress 頁面上呈現 React?

如何在 WordPress 頁面上呈現 React?

largeQ 2023-09-28 15:23:22
我正在嘗試讓 React 應用程序呈現為 Wordpress 頁面的一部分。我使用create-react-app并添加了我的應用程序"homepage": "." 到package.json構建之前。首先,我通過將必要的核心文件嵌入到標準 html 文檔中來嘗試該功能。<!DOCTYPE html><html><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"> 在頁面上,并將科學包含在header.phpbody 標簽下我的測試腳本有效,我的 React 構建在測試中有效index.html。為什么 WordPress 不渲染它?
查看完整描述

1 回答

?
烙印99

TA貢獻1829條經驗 獲得超13個贊

這有效!


如果我將腳本從遠程主機直接加載到它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


查看完整回答
反對 回復 2023-09-28
  • 1 回答
  • 0 關注
  • 161 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號