自定义组件实现对外暴露生命周期回调

[leviosa-e]

需求场景：

使用组件的业务方需要感知到自定义组件渲染完成时，执行相应的逻辑。

实现原理：

• 接收外部传入的回调方法
• 组件内部在相应的时机进行执行

代码实现：

interface IProps {
  biz: string;
  theme?: 'light' | 'dark';
  customClass?: string;
  customStyle?: CSSProperties;
  onReady?: (show: boolean) => void;
}

export default class ComponentA extends React.Component {

  componentDidMount() {
      new NoticeConfig(this.props.biz)
        .getNotice()
        .then((notice) => {
          const show = !!notice?.content && !notice.rehearsal;
          if (show) {
            this.setState({ content: notice.content }, this.checkOverflow);
          }
          this.onReady(show);
        })
        .catch(() => {
          this.onReady(false);
        });
    }

  private onReady = (show: boolean) => {
      try {
        this.props.onReady?.(show);
      } catch (error) {
        // Convert to unhandled rejection to avoid crashing
        Promise.reject(
          new Error(
            `Error occured in \`onReady\` of <ComponentA />: ${
              (error as Error | undefined)?.message || error || 'unknown'
            }`,
          ),
        );
      }
    };
}