javascript - 在 React 应用程序中使用 vanilla JavaScript 包
问题描述
我的目标是在更复杂的 React 应用程序中使用 Vanilla JavaScript 包来围绕 JavaScript 包构建额外的逻辑。
JavaScript 库是 LabelStudio,文档可以在这里找到:https ://github.com/heartexlabs/label-studio-frontend
但是,当我尝试导入 LabelStudio 时,我收到一条错误消息Module not found: Can't resolve 'label-studio'
,如此处所述https://github.com/heartexlabs/label-studio-frontend/issues/55
由于我对前端代码的理解有限,我不确定这是否是开发人员不希望用户做的事情,只是希望他们使用整个库并进行自定义,而不是将库用作组件。我的想法是在此处的香草 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>
如何在 React 组件中使用上述代码来促进动态数据加载和使用状态来自定义功能?
解决方案
我没有使 npm 模块label-studio
工作的解决方案。我尝试导入dist 文件,但出现错误
Expected an assignment or function call and instead saw an expression
所以这是一个解决方法,直到维护者解决这个问题。
从build/static/js复制 JS 文件,然后将其放在 index.html 上 public 文件夹中的脚本中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="%Your_Path_To_Label-Studio%/main.js"></script>
</body>
</html>
脚本文件定义了一个全局函数变量,所以你可以在 React 中使用 window 对象来访问它。useEffect 钩子是为了确保初始化只运行一次。
import React, { useEffect, useRef } from "react";
function App() {
const LabelStudio = window.LabelStudio; // label-studio script stores the api globally, similar to how jQuery does
const myLabelStudioRef = useRef(null); // store it and then pass it other components
useEffect(() => {
myLabelStudioRef.current = 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);
},
});
}, []);
return (
<div className="App">
{/* Use Label Studio container */}
<div id="label-studio"></div>
</div>
);
}
export default App;
至于存储 LabelStudio 的新实例,有很多方法可以解决。您可以使用useState
或useRef
挂钩将其作为变量存储在根组件上,然后将其传递给子组件。如果您想避免手动将变量向下传递到组件树,那么您需要一个状态管理器,例如React Context或 Redux。
推荐阅读
- python - How to print random words in Python and find the most used word
- angular - Angular (11) API 请求缓存
- amazon-cognito - AWS Cognito 重定向后 CloudFront 以 413 响应
- java - 如何在文本框中输入当前日期和时间
- amazon-web-services - Kubernetes - 使用单个负载均衡器对多个服务进行负载均衡
- java - 每 10 秒在 inifnity 循环中搜索一个单词
- angular - 无法解析依赖树
- java - 无法存储到对象数组,因为“this.share”为空
- sqlite - SQLite 更新语法
- python - Python TA-Lib 安装问题