在React应用程序中使用普通JavaScript包

我的目标是在更复杂的React应用程序中使用一个普通的JavaScript包，以围绕JavaScript包构建额外的逻辑

JavaScript库是LabelStudio，可以在此处找到文档：

但是，当我尝试导入LabelStudio时，会出现一个错误，显示

模块未找到：无法解析“label studio”

，如下所述

由于我对前端代码的理解有限，我不确定这是否是开发人员不希望用户做的事情，只是希望他们使用整个库并进行定制，而不是将库作为组件使用。我的想法是像这里的香草javascript示例一样使用该库：

<!-- Include Label Studio stylesheet -->
<link href="https://unpkg.com/label-studio@0.7.1/build/static/css/main.0a1ce8ac.css" rel="stylesheet">

<!-- Create the Label Studio container -->
<div id="label-studio"></div>

<!-- Include the Label Studio library -->
<script src="https://unpkg.com/label-studio@0.7.1/build/static/js/main.3ee35cc9.js"></script>

<!-- Initialize Label Studio -->
<script>
  var labelStudio = new LabelStudio('label-studio', {
    config: `
      <View>
        <Image name="img" value="$image"></Image>
        <RectangleLabels name="tag" toName="img">
          <Label value="Hello"></Label>
          <Label value="World"></Label>  
        </RectangleLabels>
      </View>
    `,

    interfaces: [
      "panel",
      "update",
      "controls",
      "side-column",
      "completions:menu",
      "completions:add-new",
      "completions:delete",
      "predictions:menu",
    ],

    user: {
      pk: 1,
      firstName: "James",
      lastName: "Dean"
    },

    task: {
      completions: [],
      predictions: [],
      id: 1,
      data: {
        image: "https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg"
      }
    },
    
    onLabelStudioLoad: function(LS) {
      var c = LS.completionStore.addCompletion({
        userGenerate: true
      });
      LS.completionStore.selectCompletion(c.id);
    }
  });
</script>   

var labelStudio=新labelStudio（'label-studio'{
配置：`
`,
接口：[
“小组”，
“更新”，
“控制”，
“侧栏”，
“完成：菜单”，
“完成：添加新内容”，
“完成：删除”，
“预测：菜单”，
],
用户：{
主键:1,，
名字：“詹姆斯”，
姓：“院长”
},
任务：{
完成情况：[]，
预测：[]，
id:1，
数据：{
图像：“https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg"
}
},
onLabelStudioLoad:函数（LS）{
var c=LS.completionStore.addCompletion({
userGenerate:true
});
LS.completionStore.selectCompletion（c.id）；
}
});

---

我如何在React组件中使用上述代码来促进动态数据加载和使用状态来定制功能？

我没有一个解决方案可以使npm模块

label studio

正常工作。我尝试导入，但它出错了

Expected an assignment or function call and instead saw an expression

因此，在维护人员解决此问题之前，这里有一个解决方法

从复制JS文件，然后将其放入index.html上公用文件夹中的脚本中

反应应用程序
您需要启用JavaScript才能运行此应用程序。

脚本文件定义了一个全局函数变量，因此您可以使用窗口对象在React中访问它。useEffect钩子用于确保初始化只运行一次

import React，{useffect，useRef}来自“React”；
函数App（）{
const LabelStudio=window.LabelStudio；//LabelStudio脚本全局存储api，类似于jQuery
const myLabelStudioRef=useRef（null）；//存储它，然后将其传递给其他组件
useffect（（）=>{
myLabelStudioRef.current=新标签工作室（“标签工作室”{
配置：`
`,
接口：[
“小组”，
“更新”，
“控制”，
“侧栏”，
“完成：菜单”，
“完成：添加新内容”，
“完成：删除”，
“预测：菜单”，
],
用户：{
主键:1,，
名字：“詹姆斯”，
姓：“迪安”，
},
任务：{
完成情况：[]，
预测：[]，
id:1，
数据：{
图片：
"https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg",
},
},
onLabelStudioLoad:函数（LS）{
var c=LS.completionStore.addCompletion({
userGenerate:true，
});
LS.completionStore.selectCompletion（c.id）；
},
});
}, []);
返回(
{/*使用Label Studio容器*/}
);
}
导出默认应用程序；

---

至于存储LabelStudio的新实例，有很多方法。您可以使用

useState

或

useRef

挂钩将其作为变量存储在根组件上，然后将其传递给子组件。如果要避免手动将变量向下传递到组件树，则需要一个状态管理器，如或Redux。

库似乎有问题，我甚至将他们的js输出复制到包中，并将其导入到React组件中，当整个日志充满

预期的赋值或函数调用，而看到的却是表达式时，它崩溃了。但是，如果我将相同的js输出放在公用文件夹中，并在index.html内的脚本标记中运行，它就会工作。谢谢您的实验。你对如何解决这个bug有什么建议吗？谢谢你的帮助。我明白了使用useEffect钩子初始化组件的意义，但是如果我需要config对象连续运行task1的接口，那么对于task2，task3。。。使用react状态中的任务对象，然后在何处调用initiate
const labelstudio=…
？您可以将其存储到组件状态并传递给需要它的其他组件，或者可以使用状态管理，例如react Context或Redux，并将该实例存储在状态存储中。我更新了问题，谢谢更新回复。这是非常有帮助的，但并不是我真正的意思——关于这一点的最后一个问题。现在，我将启动LabelStudio实例并将其存储在变量中。但是，在完成第一个任务后，我需要将该任务更新为启动的LabelStudio对象的不同任务。如果LabelStudio对象已经存储在变量中，您将如何执行此操作？您会启动一个新实例还是有方法更新配置对象？