一个在 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 (
child?.test('42');
}}
>
don't panic
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