How to use the umi-plugin-locale.formatMessage function in umi-plugin-locale

{
            console.log(item, tabProps); // eslint-disable-line no-console
            this.changeReadState(item as NoticeItem);
          }}
          loading={fetchingNotices}
          locale={{
            emptyText: formatMessage({ id: 'component.noticeIcon.empty' }),
            clear: formatMessage({ id: 'component.noticeIcon.clear' }),
            viewMore: formatMessage({ id: 'component.noticeIcon.view-more' }),
            notification: formatMessage({ id: 'component.globalHeader.notification' }),
            message: formatMessage({ id: 'component.globalHeader.message' }),
            event: formatMessage({ id: 'component.globalHeader.event' }),
          }}
          onClear={onNoticeClear}
          onPopupVisibleChange={onNoticeVisibleChange}
          onViewMore={() => message.info('Click on view more')}
          clearClose
        >

{
            console.log(item, tabProps); // eslint-disable-line no-console
            this.changeReadState(item as NoticeItem);
          }}
          loading={fetchingNotices}
          locale={{
            emptyText: formatMessage({ id: 'component.noticeIcon.empty' }),
            clear: formatMessage({ id: 'component.noticeIcon.clear' }),
            viewMore: formatMessage({ id: 'component.noticeIcon.view-more' }),
            notification: formatMessage({ id: 'component.globalHeader.notification' }),
            message: formatMessage({ id: 'component.globalHeader.message' }),
            event: formatMessage({ id: 'component.globalHeader.event' }),
          }}
          onClear={onNoticeClear}
          onPopupVisibleChange={onNoticeVisibleChange}
          onViewMore={() => message.info('Click on view more')}
          clearClose
        >

login.type === 'account' &&
              !submitting &&
              this.renderMessage(formatMessage({ id: 'app.login.message-invalid-credentials' }))}
            
             void }) => {
                e.preventDefault();
                this.loginForm.validateFields(this.handleSubmit);
              }}
            />
          
          
            {login.status === 'error' &&
              login.type === 'mobile' &&
              !submitting &&

{getFieldDecorator('captcha', {
                  rules: [
                    {
                      required: true,
                      message: formatMessage({ id: 'validation.verification-code.required' }),
                    },
                  ],
                })(
                  <input placeholder="{formatMessage({" size="large">,
                )}
              
              
                <button disabled="{!!count}" size="large">
                  {count
                    ? `${count} s`
                    : formatMessage({ id: 'app.register.get-verification-code' })}
                </button>
              

return true;
    };
    const key = `open${Date.now()}`;
    const btn = (
      <button type="primary"> {
          notification.close(key);
          reloadSW();
        }}
      &gt;
        {formatMessage({ id: 'app.pwa.serviceworker.updated.ok' })}
      </button>
    );
    notification.open({
      message: formatMessage({ id: 'app.pwa.serviceworker.updated' }),
      description: formatMessage({ id: 'app.pwa.serviceworker.updated.hint' }),
      btn,
      key,
      onClose: async () =&gt; {},
    });
  });
}

/>

          

          
             this.changeSetting('layout', value)}
            />

checkPassword = (
    rule: any,
    value: { length: number },
    callback: { (arg0: string): void; (arg0: string): void; (): void },
  ) => {
    const { visible, confirmDirty } = this.state;
    if (!value) {
      this.setState({
        help: formatMessage({ id: 'validation.password.required' }),
        visible: !!value,
      });
      callback('error');
    } else {
      this.setState({
        help: '',
      });
      if (!visible) {
        this.setState({
          visible: !!value,
        });
      }
      if (value.length < 6) {
        callback('error');
      } else {
        const { form } = this.props;

            onCopy={() => message.success(formatMessage({ id: 'app.setting.copyinfo' }))}
          >

checkConfirm = (rule: any, value: any, callback: { (arg0: any): void; (): void }) => {
    const { form } = this.props;
    if (value && value !== form.getFieldValue('password')) {
      callback(formatMessage({ id: 'validation.password.twice' }));
    } else {
      callback();
    }
  };

};
    const key = `open${Date.now()}`;
    const btn = (
      <button type="primary"> {
          notification.close(key);
          reloadSW();
        }}
      &gt;
        {formatMessage({ id: 'app.pwa.serviceworker.updated.ok' })}
      </button>
    );
    notification.open({
      message: formatMessage({ id: 'app.pwa.serviceworker.updated' }),
      description: formatMessage({ id: 'app.pwa.serviceworker.updated.hint' }),
      btn,
      key,
      onClose: async () =&gt; {},
    });
  });
}