反应模块

概念

这个模块应该为React开发者提供用于初始化和消费模块的功用.

使用量

内 纳 卢 卢 敦

一般来说,这个软件包是通过框架/应用程序脚手架执行的

• @ equinor/ 组合框架- 反应- app
• @ equinor/ 组合- 框架- 反应- 框架

所需资源

• 反应 QQ 17

此模块需要 反应 17 自模块的创建、配置和初始化以来,则更高。 提供者必须被包裹在 Suspense 组件

示例

创建提供者组件

import { Suspense } from 'react';

import http, { HttpModule } from '@equinor/fusion-framework-module-http';
import msal, { MsalModule } from '@equinor/fusion-framework-module-msal';

import { createModuleProvider } from '@equinor/fusion-framework-react-module';

export const ModuleProvider = createModuleProvider((config) => {
    config.auth.configureDefault({
        tenantId: 'MY_TENANT_ID',
        clientId: 'MY_CLIENT_ID',
        redirectUri: '/authentication/login-callback',
    });
    config.http.configureClient('foo', {
        baseUri: 'https://foo.bar',
        defaultScopes: ['FOO_CLIENT_ID/.default'],
    });
  },
  [http, msal]
)

创建应用程序组件( 消费者)

import { useModule } from '@equinor/fusion-framework-react-module';

const AppComponent = () => {
  const http = useModule('http');
  const client = http.createClient('foo');
  return (
    <button onClick={client.fetchAsync('/api/todo')}>Fetch todo</button>
  );
}

渲染应用

import ReactDOM from 'react-dom';

import { ModuleProvider } from './Provider';
import { AppComponent } from './AppComponent';

ReactDOM.render(
  <Suspense fallback={<span>Loading framework</span>}>
    <ModuleProvider>
      <AppComponent />
    </ModuleProvider>
  </Suspense>,
  document.getElementById('root')
);