你好，团队。
我想创建一个嵌入式的React应用，这样我们就可以在其他项目中直接调用这个脚本。
iqxoj9l91#
在创建要嵌入的React应用后，运行以下命令：npm run build此命令会生成一个包含优化文件的构建文件夹。导航到上一步中创建的构建目录。它包含像index.html、static/js/main.js和static/css/main.css这样的文件。将构建文件夹的内容复制到现有网站项目中的指定目录。例如，你可能会使用名为embedded-react/的目录。在你希望React应用出现的HTML文件中，包含以下代码：
npm run build
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="embedded-react/static/css/main.css"> </head> <body> <!-- This is where the React app will be embedded --> <div id="react-app"></div> <script src="embedded-react/static/js/main.js"></script> </body> </html>
确保路径(embedded-react/static/css/main.css和embedded-react/static/js/main.js)正确指向放置构建文件的位置。如果你希望React应用仅在用户触发事件(例如点击按钮)时加载，请使用以下方法：
<div id="react-app"></div> <button id="load-react">Load React App</button> <script> document.getElementById('load-react').addEventListener('click', function () { const script = document.createElement('script'); script.src = 'embedded-react/static/js/main.js'; document.body.appendChild(script); }); </script>
1条答案
按热度按时间iqxoj9l91#
在创建要嵌入的React应用后，运行以下命令：
npm run build此命令会生成一个包含优化文件的构建文件夹。
导航到上一步中创建的构建目录。它包含像index.html、static/js/main.js和static/css/main.css这样的文件。
将构建文件夹的内容复制到现有网站项目中的指定目录。例如，你可能会使用名为embedded-react/的目录。
在你希望React应用出现的HTML文件中，包含以下代码：
确保路径(embedded-react/static/css/main.css和embedded-react/static/js/main.js)正确指向放置构建文件的位置。
如果你希望React应用仅在用户触发事件(例如点击按钮)时加载，请使用以下方法：