How to use the umi/locale.formatMessage function in umi

className={styles.action}
          >
            
          
        
         {
            console.log(item, tabProps); // eslint-disable-line
            this.changeReadState(item, tabProps);
          }}
          locale={{
            emptyText: formatMessage({ id: 'component.noticeIcon.empty' }),
            clear: formatMessage({ id: 'component.noticeIcon.clear' }),
            loadedAll: formatMessage({ id: 'component.noticeIcon.loaded' }),
            loadMore: formatMessage({ id: 'component.noticeIcon.loading-more' }),
          }}
          onClear={onNoticeClear}
          onLoadMore={this.fetchMoreNotices}
          onPopupVisibleChange={onNoticeVisibleChange}
          loading={fetchingNotices}
          clearClose
        >

>
            
          
        
         {
            console.log(item, tabProps); // eslint-disable-line
            this.changeReadState(item, tabProps);
          }}
          locale={{
            emptyText: formatMessage({ id: 'component.noticeIcon.empty' }),
            clear: formatMessage({ id: 'component.noticeIcon.clear' }),
            loadedAll: formatMessage({ id: 'component.noticeIcon.loaded' }),
            loadMore: formatMessage({ id: 'component.noticeIcon.loading-more' }),
          }}
          onClear={onNoticeClear}
          onLoadMore={this.fetchMoreNotices}
          onPopupVisibleChange={onNoticeVisibleChange}
          loading={fetchingNotices}
          clearClose
        >

this.changeSetting('primaryColor', color)}
          />

          

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

)
            },
            {
                title: formatMessage({ id: "app.setting.fixedheader" }),
                action: (

getPageTitle = (pathname, breadcrumbNameMap) => {
    const currRouterData = this.matchParamsPath(pathname, breadcrumbNameMap);

    if (!currRouterData) {
      return 'Ant Tabs';
    }
    const pageName = formatMessage({
      id: currRouterData.locale || currRouterData.name,
      defaultMessage: currRouterData.name,
    });

    return `${pageName} - Ant Tabs`;
  };

{getFieldDecorator('mail', {
                initialValue: mail,
              })(<input>)}
            
            
              {getFieldDecorator('pages', {
                initialValue: pages,
              })()}
            
            
              {getFieldDecorator('interval', {
                initialValue: interval,
              })()}
            
          
        
      
    );
  }
}

value={prefix}
                onChange={this.changePrefix}
                style={{ width: '20%' }}
              >
                <option value="86">+86</option>
                <option value="87">+87</option>
              
              {getFieldDecorator('mobile', {
                rules: [
                  {
                    required: true,
                    message: formatMessage({ id: 'BLOCK_NAME.phone-number.required' }),
                  },
                  {
                    pattern: /^\d{11}$/,
                    message: formatMessage({ id: 'BLOCK_NAME.phone-number.wrong-format' }),
                  },
                ],
              })(
                <input placeholder="{formatMessage({" style="{{" size="large">
              )}
            
          
          
            
              
                {getFieldDecorator('captcha', {
                  rules: [

placeholder={`${formatMessage({ id: 'app.login.password' })}`}
              rules={[
                {
                  required: true,
                  message: formatMessage({ id: 'validation.password.required' }),
                },
              ]}
              onPressEnter={() => this.loginForm.validateFields(this.handleSubmit)}
            />
          
          
            {login.status === 'error' &&
              login.type === 'mobile' &&
              !submitting &&
              this.renderMessage(
                formatMessage({ id: 'app.login.message-invalid-verification-code' })
              )}

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; {}
		});
	});
}

getPageTitle = pathname => {
    const currRouterData = this.matchParamsPath(pathname);

    if (!currRouterData) {
      return 'Ant Design Pro';
    }
    const message = formatMessage({
      id: currRouterData.locale || currRouterData.name,
      defaultMessage: currRouterData.name,
    });
    return `${message} - Ant Design Pro`;
  };