React脚本验证：渲染双360°图片组件遗留问题求助

大家好，我正在开发一个React组件，目标是实现两张360°全景图片的渲染功能，目前大部分核心逻辑已经跑通，但还有两个问题卡了很久没解决，想请教社区里的大佬们。

先贴出我在componentDidMount生命周期中挂载第三方渲染脚本的代码片段（注：原代码后半部分未粘贴完整，推测是处理第二张全景图的逻辑）：

componentDidMount() {
  if(this.threesixty_interior){
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'source/player.js';
    s.dataset.interior = true;
    s.dataset.subject = this.props.subject;
    this.threesixty_interior.appendChild(s);
  }
  if(this.threesixty_exterior){ // 原代码此处后续逻辑未粘贴完整
    // 对应外部全景图的脚本挂载代码
  }
}

背景补充： #

• player.js是专门处理360°图片渲染的第三方脚本，我通过data-interior标记区分内部/外部全景图，data-subject用来传递主题参数
• 组件通过React的ref分别获取了threesixty_interior和threesixty_exterior两个DOM容器，用于挂载对应脚本

目前遇到的两个具体问题：

1. [请补充第一个问题的详细描述，比如：内部全景图加载正常，但外部全景图始终无法渲染；或切换两张图时出现脚本冲突导致页面卡顿等]
2. [请补充第二个问题的详细描述]

我已经尝试过检查DOM节点是否正确获取、调整脚本加载顺序，但都没能解决问题。有没有朋友能帮忙分析可能的原因，或者给出调试思路？非常感谢！

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