一个在 iModel 项目中使用的 react hook。
npm install @sidri-fe/imodel-hooks一个在 iModel 项目中使用的 react hook。
为了避免多重嵌套,重复创建 connection,自动获取 child,在组件卸载时自动销毁实例。
1. 引入 ImodelFrame 作为初始化 iframe 以及 context 的容器
``tsx
// index.tsx
import { ImodelFrame } from '@sidri/imodel-hooks';
const App = () => {
return (
);
};
`
2. 在 ImodelFrame 内(请注意一定要在该组件内)任意级别的子组件内使用 useImodel 来获取 child ,方便快捷的调用 iModel Frame 提供的 API。
`tsx
// Son.tsx
import React from 'react';
import { useImodel } from '@sidri/imodel-hooks';
const Son = () => {
const { child } = useImodel();
return (
export default Son;
`
3. ImodelFrame 接受的主要参数如下图所示(另外接受的参数包含 iframe 作为 element 的所有属性):
注:为了避免嵌套,此 hooks 已经将 onCompleted 集成在内部,不再需要使用方监听
`tsx
// index.tsx
import { ImodelFrame } from '@sidri/imodel-hooks';
const App = () => {
return (
// error 为握手时发生的错误
}}
methods={{
// 具体请参考 iModel Frame 的 API 文档
onLeftClick(info) {
console.log(info);
},
onToolChange(toolName) {
console.log(toolName);
},
}}
// 是否展示调试日志(默认为否)
debug={false}
// 握手的超时时间,默认为 10000(单位:毫秒)
timeout={10000}
// 以下常用 props 就不再赘述了
className={}
style={}
>
);
};
`
1. 使用 nrm 或者 cgr 之类的工具将 npm 源切换为 http://10.190.44.202:4444 (内网用户)
`shell`
yarn add @sidri-fe/imodel-hooks
2. 直接使用 tgz 包(内网用户)
`json`
{
"dependencies": {
"@sidri-fe/imodel-hooks": "http://10.190.44.202:4444/@sidri-fe/imodel-hooks/-/imodel-hooks-0.1.1.tgz"
}
}
3. 从 npm 市场下载(非内网用户),请注意:最新的 patch 会优先发布在内网
`shell``
yarn add @sidri-fe/imodel-hooks