@acoustic-content-sdk/react-components 中文文档教程

Question

的服务和 UI 组件的实现React 版本的 SDK，与实际数据的加载方式无关。

Define layout components

• Implement a React component that accepts the ReactComponentProps as input
• Register this component using the ComponentRegistry service

How to access the ComponentRegistry service?

• Create a React component and use the provider of theACOUSTICCONTEXTCOMPONENT_REGISTRY context.

Example:

export const LayoutsModule: FC = ({ children }) => (
  <ACOUSTIC_CONTEXT_COMPONENT_REGISTRY.Consumer>
    {(aReg) => {
      // do something sensible with the service

      // include the children
      return <>{children}</>;
    }}
  </ACOUSTIC_CONTEXT_COMPONENT_REGISTRY.Consumer>
);

API Documentation

Home > @acoustic-content-sdk/react-components

react-components package

Interfaces

Interface	Description
LayoutRegistrationProps

Variables

Variable	Description
ACOUSTIC_PROVIDER_BROWSER_WINDOW	Provides the ACOUSTIC_CONTEXT_WINDOW token for browser based applications.
ACOUSTIC_PROVIDER_COMPONENT_REGISTRY	Declares the provider
ACOUSTIC_PROVIDER_COMPONENT_RESOLVER	Declares the provider
ACOUSTIC_PROVIDER_CONTENT_COMPONENT	Provides the rendering context component
ACOUSTIC_PROVIDER_DELIVERY_SEARCH_RESOLVER	Declares the provider
ACOUSTIC_PROVIDER_EDIT_HOST_WINDOW	Declares the provider
ACOUSTIC_PROVIDER_LOGGER_SERVICE	Declares the provider
ACOUSTIC_PROVIDER_PAGE_COMPONENT	Provides the rendering context component
ACOUSTIC_PROVIDER_PAGE_SERVICE	Declares the provider
ACOUSTIC_PROVIDER_PROTECTED_CONTENT	Declares the provider
ACOUSTIC_PROVIDER_RENDERING_CONTEXT_RESOLVER	Declares the provider
ACOUSTIC_PROVIDERS_COMPONENTS	Exports the providers of this module
LayoutComponent	The layout component directive
LayoutMapping	The layout mapping directive
LayoutRegistration	Component that registers layouts
VERSION	Version and build number of the package
WchContentComponent	Implementation of the component that performs the actual rendering of content
WchPageComponent	Implementation of the top level component that resolves the page

Type Aliases

Type Alias	Description
LayoutComponentDirective	Type for a directive

主页 > @acoustic-content-sdk/react-components > LayoutRegistrationProps

LayoutRegistrationProps interface

Signature:

export interface LayoutRegistrationProps 

Properties

Property	Type	Description
register	Consumer<ComponentRegistry>

Home > ; @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_BROWSER_WINDOW

ACOUSTIC_PROVIDER_BROWSER_WINDOW variable

为基于浏览器的应用程序提供 ACOUSTIC_CONTEXT_WINDOW 令牌。

Signature:

ACOUSTIC_PROVIDER_BROWSER_WINDOW: import("@acoustic-content-sdk/react-api").ReactProvider<WindowType>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_COMPONENT_REGISTRY

ACOUSTIC_PROVIDER_COMPONENT_REGISTRY variable

Declares the provider

Signature:

ACOUSTIC_PROVIDER_COMPONENT_REGISTRY: import("@acoustic-content-sdk/react-api").ReactProvider<import("@acoustic-content-sdk/react-api").ComponentRegistry>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_COMPONENT_RESOLVER

ACOUSTIC_PROVIDER_COMPONENT_RESOLVER variable

Declares the provider

Signature:

ACOUSTIC_PROVIDER_COMPONENT_RESOLVER: import("@acoustic-content-sdk/react-api").ReactProvider<import("@acoustic-content-sdk/react-api").ComponentResolver>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_CONTENT_COMPONENT

ACOUSTIC_PROVIDER_CONTENT_COMPONENT variable

Provides the rendering context component

Signature:

ACOUSTIC_PROVIDER_CONTENT_COMPONENT: import("@acoustic-content-sdk/react-api").ReactProvider<import("@acoustic-content-sdk/react-api").ReactComponent<ContentComponentProps, any>>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_DELIVERY_SEARCH_RESOLVER

ACOUSTIC_PROVIDER_DELIVERY_SEARCH_RESOLVER variable

Declares the provider

Signature:

ACOUSTIC_PROVIDER_DELIVERY_SEARCH_RESOLVER: import("@acoustic-content-sdk/react-api").ReactProvider<import("@acoustic-content-sdk/component-api").DeliverySearchResolver>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_EDIT_HOST_WINDOW

ACOUSTIC_PROVIDER_EDIT_HOST_WINDOW variable

Declares the provider

Signature:

ACOUSTIC_PROVIDER_EDIT_HOST_WINDOW: import("@acoustic-content-sdk/react-api").ReactProvider<WindowType>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_LOGGER_SERVICE

ACOUSTIC_PROVIDER_LOGGER_SERVICE variable

Declares the provider

Signature:

ACOUSTIC_PROVIDER_LOGGER_SERVICE: import("@acoustic-content-sdk/react-api").ReactProvider<import("@acoustic-content-sdk/api").LoggerService>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_PAGE_COMPONENT

ACOUSTIC_PROVIDER_PAGE_COMPONENT variable

Provides the rendering context component

Signature:

ACOUSTIC_PROVIDER_PAGE_COMPONENT: import("@acoustic-content-sdk/react-api").ReactProvider<import("@acoustic-content-sdk/react-api").ReactComponent<RouteComponentProps<{}, import("react-router").StaticContext, {}>, any>>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_PAGE_SERVICE

ACOUSTIC_PROVIDER_PAGE_SERVICE variable

Declares the provider

Signature:

ACOUSTIC_PROVIDER_PAGE_SERVICE: import("@acoustic-content-sdk/react-api").ReactProvider<import("@acoustic-content-sdk/react-api").ReactWchPageService>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_PROTECTED_CONTENT

ACOUSTIC_PROVIDER_PROTECTED_CONTENT variable

Declares the provider

Signature:

ACOUSTIC_PROVIDER_PROTECTED_CONTENT: import("@acoustic-content-sdk/react-api").ReactProvider<import("@acoustic-content-sdk/component-api").ProtectedContent>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDER_RENDERING_CONTEXT_RESOLVER

ACOUSTIC_PROVIDER_RENDERING_CONTEXT_RESOLVER variable

Declares the provider

Signature:

ACOUSTIC_PROVIDER_RENDERING_CONTEXT_RESOLVER: import("@acoustic-content-sdk/react-api").ReactProvider<import("@acoustic-content-sdk/component-api").RenderingContextResolver>

Home > @acoustic-content-sdk/react-components > ACOUSTIC_PROVIDERS_COMPONENTS

ACOUSTIC_PROVIDERS_COMPONENTS variable

Exports the providers of this module

Signature:

ACOUSTIC_PROVIDERS_COMPONENTS: Array<ReactProvider<any>>

首页 > @acoustic-content-sdk/react-components > LayoutComponent

LayoutComponent variable

The layout component directive

Signature:

LayoutComponent: <T extends import("@acoustic-content-sdk/react-api").ReactComponent<import("@acoustic-content-sdk/react-api").ReactComponentProps, any>>(aDirective?: import("@acoustic-content-sdk/component-api").AbstractLayoutComponentDirective) => (cls: T) => void

Home< /a> > @acoustic-content-sdk/react-components > LayoutMapping

LayoutMapping variable

The layout mapping directive

Signature:

LayoutMapping: <T extends import("@acoustic-content-sdk/react-api").ReactComponent<import("@acoustic-content-sdk/react-api").ReactComponentProps, any>>(aID: string | string[] | import("@acoustic-content-sdk/component-api/dist/decorators/layout/layout.directive").LayoutMappingDirective, aSelector?: string | import("react").FunctionComponent<import("@acoustic-content-sdk/react-api").ReactComponentProps> | import("react").ComponentClass<import("@acoustic-content-sdk/react-api").ReactComponentProps, any> | string[], aLayoutMode?: string | string[]) => (cls: T) => void

Home< /a> > @acoustic-content-sdk/react-components > LayoutRegistration

LayoutRegistration variable

Component that registers layouts

Signature:

LayoutRegistration: FC<LayoutRegistrationProps>

Home< /a> > @acoustic-content-sdk/react-components > VERSION

VERSION variable

Version and build number of the package

Signature:

VERSION: {
    version: {
        major: string;
        minor: string;
        patch: string;
        branch: string;
    };
    build: Date;
}

首页 > @acoustic-content-sdk/react-components > WchContentComponent

WchContentComponent variable

Implementation of the component that performs the actual rendering of content

Signature:

WchContentComponent: FC<ContentComponentProps>

主页 > @acoustic-content-sdk/react-components > WchPageComponent

WchPageComponent variable

Implementation of the top level component that resolves the page

Signature:

WchPageComponent: FC<RouteComponentProps>

主页 > @acoustic-content-sdk/react-components > LayoutComponentDirective

LayoutComponentDirective type

Type for a directive

Signature:

export declare type LayoutComponentDirective = AbstractLayoutComponentDirective;

Home< /a> > @acoustic-content-sdk/react-components > LayoutRegistrationProps > 注册

LayoutRegistrationProps.register property

签名：

register: Consumer<ComponentRegistry>;