如何在React项目中嵌入JS脚本？360全景游览脚本显示失败求助

问题根源 #

1. 重复加载脚本：你在public/index.html和Portfolio组件中都引入了embed.js，重复加载会导致脚本冲突或执行异常。
2. React JSX不支持直接执行script标签：React在渲染JSX时，不会像原生HTML那样自动执行嵌入的<script>标签，组件内的脚本因此无法生效。
3. 错误的嵌入方式：Kuula的全景内容需要通过官方API主动初始化，仅靠静态script标签无法完成渲染。

修复步骤 #

步骤1：移除重复的脚本引用

删除Portfolio组件内的<script>标签，只保留public/index.html中的脚本（或直接改用下文的动态加载方案）。

步骤2：修改组件，用Kuula API初始化全景内容

在组件中添加一个DOM容器，通过useEffect钩子确保组件挂载后再调用Kuula的初始化方法：

import React, { useEffect } from 'react';
import "./portfolio.css";
import { CTA } from '../../components';

const Portfolio = () => {
  useEffect(() => {
    // 确认Kuula全局对象已加载完成
    if (window.Kuula) {
      window.Kuula.embed({
        container: '#kuula-panorama', // 指向容器元素的ID
        url: 'https://kuula.co/share/collection/7FN30?logo=-1&info=0&fs=1&vr=1&zoom=1&initload=0&thumbs=1'
      });
    }
  }, []);

  return (
    <div className='portfolio' id="portfolio">
      <div className="portfolio-heading">
        <h1>Examples</h1>
        <p>Experience virtual tours from the customer perspective</p>
      </div>
      <div className="portfolio-cards">
        <div className="card-container-card">
          {/* 全景内容的容器，需指定唯一ID */}
          <div className="card-container-card-img" id="kuula-panorama"></div>
          <div className="card-container-card-title">
            <p>Revel x Plato</p>
          </div>
        </div>
      </div>
      <CTA />
    </div>
  )
}

export default Portfolio

可选方案：动态加载脚本（无需修改index.html）

如果不想全局加载embed.js，可以在组件内动态加载脚本，确保加载完成后再初始化：

import React, { useEffect } from 'react';
import "./portfolio.css";
import { CTA } from '../../components';

const Portfolio = () => {
  useEffect(() => {
    const loadKuulaScript = async () => {
      const script = document.createElement('script');
      script.src = 'https://static.kuula.io/embed.js';
      script.async = true;

      await new Promise((resolve) => {
        script.onload = resolve;
        document.body.appendChild(script);
      });

      if (window.Kuula) {
        window.Kuula.embed({
          container: '#kuula-panorama',
          url: 'https://kuula.co/share/collection/7FN30?logo=-1&info=0&fs=1&vr=1&zoom=1&initload=0&thumbs=1'
        });
      }
    };

    loadKuulaScript();

    // 组件卸载时清理脚本
    return () => {
      const script = document.querySelector('script[src="https://static.kuula.io/embed.js"]');
      if (script) document.body.removeChild(script);
    };
  }, []);

  return (
    <div className='portfolio' id="portfolio">
      <div className="portfolio-heading">
        <h1>Examples</h1>
        <p>Experience virtual tours from the customer perspective</p>
      </div>
      <div className="portfolio-cards">
        <div className="card-container-card">
          <div className="card-container-card-img" id="kuula-panorama"></div>
          <div className="card-container-card-title">
            <p>Revel x Plato</p>
          </div>
        </div>
      </div>
      <CTA />
    </div>
  )
}

export default Portfolio

额外检查 #

• 打开浏览器控制台（F12），查看是否有脚本加载错误（如404）或JavaScript报错。
• 确保容器元素有足够宽高，可在CSS中设置：

#kuula-panorama {
  width: 100%;
  height: 400px; /* 根据需求调整 */
}

内容的提问来源于stack exchange，提问作者Michael Davidson