@ equinor/ 组合- 框架- 反应- 模块- context
Fusion上下文模块的反应钩. 提供钩子来读取当前上下文,设置上下文,并查询来自React组件的现有上下文.
导入 :
import { useCurrentContext, useQueryContext, enableContext } from '@equinor/fusion-framework-react-module-context';
出口
| 导出 | 类型 | 说明 |
|---|---|---|
useCurrentContext | 钩子 | 读取并设置当前上下文( 需要提供方参数) |
useModuleCurrentContext | 钩子 | 从最近的模块范围读取和设置当前上下文 |
useQueryContext | 钩子 | 搜索可用的上下文并解禁( 需要提供商) |
useModuleQueryContext | 钩子 | 从最近的模块范围搜索可用的上下文 |
enableContext | 函数 | 在配置符中启用上下文模块 |
ContextModule | 类型 | 背景模块类型定义 |
ContextItem | 类型 | 单一上下文条目(项目、设施等) |
ContextItemType | 类型 | 上下文项目类型 |
IContextProvider | 类型 | 上下文提供者接口 |
IContextModuleConfigurator | 类型 | 启用上下文模块的配置界面 |
FusionContextSearchError | 错误 | 上下文搜索失败时出错 |
此软件包对 react-app/context
| 假设 | 从 |
|---|---|
| 构建融合应用( 最常见的) | @equinor/fusion-framework-react-app/context |
| 建立可重复使用的库或模块 | @equinor/fusion-framework-react-module-context |
| 建立门户或主机应用程序 | @equinor/fusion-framework-react-module-context |
这个 react-app/context 子路径用应用扫描的方便来包裹这些钩子. 当构建框架级代码或共享库需要明确提供者注入时直接使用此软件包.
使用当前文本/ 使用模块当前文本
返回当前选定的上下文和一个设置函数.
import { useModuleCurrentContext } from '@equinor/fusion-framework-react-module-context';
const ContextInfo = () => {
const { currentContext, setCurrentContext } = useModuleCurrentContext();
if (!currentContext) return <p>No context selected</p>;
return (
<div>
<p>{currentContext.title}</p>
<button onClick={() => setCurrentContext(null)}>Clear</button>
</div>
);
};
使用查询链接/ 使用模块查询链接
搜索内置调试的可用上下文( 默认500ms) .
import { useModuleQueryContext } from '@equinor/fusion-framework-react-module-context';
const ContextSearch = () => {
const { value: results, querying, query } = useModuleQueryContext();
return (
<div>
<input onChange={(e) => query(e.target.value)} placeholder="Search contexts…" />
{querying && <span>Searching…</span>}
<ul>{results?.map((ctx) => <li key={ctx.id}>{ctx.title}</li>)}</ul>
</div>
);
};