Reactにいくつか問題があります。クラスの形式でコンポーネント ライブラリを作成したいと考えています (私は Java の世界から来ており、OOP の方が読みやすいと思います)。
そのために、すべてのコンポーネントが継承される基本クラスを作成しました。
import { Box, createMuiTheme, Theme } from '@material-ui/core';
import React from 'react';
import { findDOMNode } from 'react-dom';
import { MyTheme, defaultPalette } from '../MyTheme/MyTheme';
import { BoxProps } from './BoxProps';
import { MyComponentProperties, MyComponentState } from './MyComponent.types';
import { ComponentUtilities } from './ComponentUtilities';
import { EventListenerPool } from './EventListenerPool';
/**
* Default class for create a Component with this library
* @abstract
*/
export abstract class
MyComponent<P extends MyComponentProperties, S extends MyComponentState>
extends React.Component<P, S> {
static readonly VERSION: number = 100;
/**
* Constant for the event : componentDidMount
* @constant EVENT_COMPONENT_DID_MOUNT
*/
protected static readonly EVENT_COMPONENT_DID_MOUNT = 'EVENT_COMPONENT_DID_MOUNT';
/**
* Constant for the event : componentWillUnmount
* @constant EVENT_COMPONENT_WILL_UNMOUNT
*/
protected static readonly EVENT_COMPONENT_WILL_UNMOUNT = 'EVENT_COMPONENT_WILL_UNMOUNT';
/**
* Constant for the event : clickOutside
* @constant EVENT_COMPONENT_CLICK_OUTSIDE
*/
protected static readonly EVENT_COMPONENT_CLICK_OUTSIDE = 'EVENT_COMPONENT_CLICK_OUTSIDE';
/**
* Listener's pool for trigger events
* @type {Map<string, EventListenerPool>}
*/
private readonly eventListenerPools: Map<string, EventListenerPool>;
/**
* Component theme
* @property {Theme}
*/
protected readonly theme: Theme;
/**
* Generic id if the property's id is missing
* @type {string}
*/
private genericId: string = ComponentUtilities.getNewGenericMyComponentId();
/**
* Root node in the DOM
* @type {Element | null | Text}
*/
protected rootNode: Element | null | Text;
/**
* @constructor
* @param props Properties for create the component
*/
constructor(props: P) {
super(props);
this.rootNode = null;
this.state = {} as unknown as S;
this.eventListenerPools = new Map<string, EventListenerPool>();
this.initComponentListeners();
this.theme = this.createTheme();
}
/**
* Get component's ID
* @returns ID property or the generic ID
*/
get id(): string {
let id = this.props.id;
if (id === undefined) {
id = this.genericId;
}
return id as string;
}
/**
* Get style for the component
* @returns component style
*/
protected get style(): React.CSSProperties | undefined {
return this.props.style;
}
/**
* Get disabled property
* @returns true if the component is disabled
*/
get isDisabled(): boolean | undefined {
return this.props.disabled;
}
/**
* Get component's class name
* @returns Class name
*/
protected get className(): string | undefined {
return this.props.className;
}
/**
* Get component's children
* @returns children
*/
protected get children(): React.ReactNode | undefined {
return this.props.children;
}
/**
* Create a new pool listner for specific event type
* @param eventType Event type
*/
protected createEventListenerPool(eventType: string): void {
this.eventListenerPools.set(eventType, new EventListenerPool());
}
/**
* Get the listener pool which is associated with the type of event
* @param eventType Event type
* @returns listener pool or undefined if the pool isn't created
*/
private getEventListenerPool(
eventType: string
): EventListenerPool | undefined {
return this.eventListenerPools.get(eventType);
}
/**
* Add a new listener in a listener pool
* @param eventType Event type
* @param listener Listener to add
*/
protected addListenerInListenerPool(eventType: string | Array<string>,
// eslint-disable-next-line @typescript-eslint/ban-types
listener?: Function): void {
if (listener) {
const pools = new Array<EventListenerPool>();
if (eventType instanceof Array) {
eventType.forEach((event) => {
const pool = this.getEventListenerPool(event);
if (pool) {
pools.push(pool);
}
});
} else {
const listenerPool = this.getEventListenerPool(eventType);
if (listenerPool) {
pools.push(listenerPool);
}
}
pools.forEach((pool) => pool.add(listener));
}
}
/**
* Basic method for fire an event
* @param eventType Event type key
* @param event Event to fire
*/
protected fireBasicEventType(eventType: string, event?: unknown): void {
const listenerPool = this.getEventListenerPool(eventType);
if (listenerPool) {
listenerPool.fireEvent(event);
}
}
/**
* Initialize component listeners
*/
protected initComponentListeners(): void {
this.createEventListenerPool(MyComponent.EVENT_COMPONENT_DID_MOUNT);
this.addComponentDidMountListener(this.props.onComponentDidMount);
this.createEventListenerPool(MyComponent.EVENT_COMPONENT_WILL_UNMOUNT);
this.addComponentWillUnmountListener(this.props.onComponentWillUnmount);
this.createEventListenerPool(MyComponent.EVENT_COMPONENT_CLICK_OUTSIDE);
this.addClickOutsideListener(this.props.onClickOutside);
}
/**
* Add a listener when the component did mount
* @param listener Listener
*/
private addComponentDidMountListener(listener?: (() => void)): void {
this.addListenerInListenerPool(MyComponent.EVENT_COMPONENT_DID_MOUNT, listener);
}
/**
* Function called when component did mount.
* Add a default listener on mousedown event for manage the click outside the component
*/
componentDidMount(): void {
this.rootNode = findDOMNode(this);
document.addEventListener('mousedown', this.handleClickOutside.bind(this));
this.fireBasicEventType(MyComponent.EVENT_COMPONENT_DID_MOUNT);
}
/**
* Add a listener when the component will unmount
* @param listener Listener
*/
private addComponentWillUnmountListener(listener?: (() => void)): void {
this.addListenerInListenerPool(MyComponent.EVENT_COMPONENT_WILL_UNMOUNT, listener);
}
/**
* Add a listener when click outside the component
* @param listener Listener
*/
private addClickOutsideListener(listener?: ((event: MouseEvent) => void)): void {
this.addListenerInListenerPool(MyComponent.EVENT_COMPONENT_CLICK_OUTSIDE, listener);
}
/**
* Function called when the component will unmount
*/
componentWillUnmount(): void {
document.removeEventListener('mousedown', this.handleClickOutside.bind(this));
this.fireBasicEventType(MyComponent.EVENT_COMPONENT_WILL_UNMOUNT);
}
/**
* Create the theme for the component
* @returns Theme for the component
*/
protected createTheme(): Theme {
return createMuiTheme(this.defaultComponentTheme());
}
/**
* Get the default theme for the component
* @returns Default theme
*/
private defaultComponentTheme(): MyTheme {
return defaultPalette;
}
/**
* The render for the React component. Wrap the compoent's render.
* @returns The element that will be used in the DOM
*/
render(): JSX.Element {
let element: JSX.Element;
element = this.renderComponent();
element = this.wrapElement(element);
return element;
}
/**
* The method for render compnent. Return only the component's render
* @returns Element will be used in the DOM for the component
*/
protected abstract renderComponent(): JSX.Element;
/**
* Wrap the element with a Box component
* @param oriElement Element to wrap
* @returns Wrapped element
*/
protected wrapElement(oriElement: JSX.Element): JSX.Element {
let element = oriElement;
const { boxProps } = this.props;
element = this.wrapWithBoxProps(element, boxProps);
return element;
}
protected wrapWithBoxProps(oriElement: JSX.Element, boxProps?: BoxProps): JSX.Element {
let element = oriElement;
if (boxProps) {
element = (
<Box {...boxProps}>
{element}
</Box>
);
}
return element;
}
/**
* Handle the event when click outside the element.
* Fire event only if the mousedown event is outside the component
* @param event The event mousedown
*/
protected handleClickOutside(event: MouseEvent): void {
if (!this.childOf(event.target as Element | null)) {
this.fireBasicEventType(MyComponent.EVENT_COMPONENT_CLICK_OUTSIDE, event);
}
}
/**
* Check if the element is in the component (in the DOM)
* @param node Node to check
* @returns true if the element is in the component DOM
*/
protected childOf(node: (Node & ParentNode) | null) {
let child = node;
let check = false;
while (child !== null) {
if (child === this.rootNode) {
check = true;
break;
}
child = child.parentNode;
}
return check;
}
}
次に、たとえばアラートを表示するための基本的なコンポーネントがあります。
import { Alert, AlertTitle } from '@material-ui/lab';
import React from 'react';
import { MyComponent } from '../MyComponent/MyComponent';
import { MyAlertProperties, MyAlertState } from './MyAlert.types';
/**
* An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
* @extends MyComponent
*/
export class MyAlert extends MyComponent<MyAlertProperties, MyAlertState> {
static readonly VERSION: number = 100;
/**
* @override
*/
protected renderComponent(): JSX.Element {
const { elevation, severity, variant } = this.props;
const element = (
<Alert
elevation={elevation}
variant={variant}
severity={severity}
>
{this.getRenderTitle()}
{this.children}
</Alert>
);
return element;
}
/**
* Render the alert's title
* @returns Alert's title element
*/
private getRenderTitle(): JSX.Element {
const { title } = this.props;
let element = undefined as unknown as JSX.Element;
if (title) {
element = (<AlertTitle>{title}</AlertTitle>);
}
return element;
}
}
私は自分のライブラリを rollupjs で構築しましたが、それはストーリーブックを介してうまく機能します。
次に、以前に「create-react-app」を介して作成した React アプリケーションの npm 依存関係と、typescript テンプレートを使用してライブラリを関連付けたいと考えています。App.tsx でコンポーネントを呼び出すと、コンポーネントで何も使用していないときに「Invalid hook call」というエラー メッセージが表示されます。
import React from 'react';
import { MyAlert } from 'myreactlib/build';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<MyAlert>Alert</MyAlert>
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
単純な div を使用すると、App.tsx は正常に動作します。
私の問題がどこから来ているのかわかりません。フックは使いません。クラスベースのコンポーネントでは禁止されていることを知っています。情報については、私のアプリケーションの反応のバージョンは良いようです:
- 反応 @ 16.13.1
- 反応-dom@16.13.1
誰かがアイデアを持っている場合は？ありがとうございました