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

{
      label: 'id',
      name: 'id',
      itemRender: <input type="hidden">,
      hidden: true,
    },
    {
      label: ,
      name: 'name',
      rules: [
        {
          required: true,
          message: ,
        },
      ],
      itemRender: <input placeholder="{formatMessage({">,
      formItemLayout: layout,
    },
    {
      label: ,
      name: 'urlRegex',
      rules: [
        {
          required: true,
          message: ,
        },
        {
          // @ts-ignore
          validator: urlRegexValidator.bind(this),
        },
      ],
      itemRender: <input placeholder="URL正则表达式">,

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: 'validation.phone-number.required' }),
                  },
                  {
                    pattern: /^\d{11}$/,
                    message: formatMessage({ id: 'validation.phone-number.wrong-format' }),
                  },
                ],
              })(
                <input placeholder="{formatMessage({" style="{{" size="large">
              )}
            
          
          
            
              
                {getFieldDecorator('captcha', {
                  rules: [

.then(() => {
        that.setState({
          selectedRows: selectedRows.filter(item => ids.indexOf(item.id) === -1),
        });
        if (that.pageRef.current) {
          that.pageRef.current.doSearch();
        }
        message.success(formatMessage({ id: 'component.common.text.deleted-success' }));
      })
      .catch(() => {});

onCancel={() => handleModalVisible()}
    >
      
        {form.getFieldDecorator('username', {
          initialValue: method === 'create' ? '' : user.username,
          rules: [
            {
              required: true,
              message: formatMessage({
                id: 'app.operator.user.form.name.required',
                defaultMessage: 'Please input user name',
              }),
              min: 1,
            },
          ],
        })(
          <input placeholder="{formatMessage({">
        )}
      

} = this.props;
    return (
      <div>
        <div>
          <form>
            
              {getFieldDecorator('email', {
                rules: [
                  {
                    required: true,
                    message: formatMessage({ id: 'app.settings.basic.email-message' }, {}),
                  },
                ],
              })(<input>)}
            
            
              {getFieldDecorator('name', {
                rules: [
                  {
                    required: true,
                    message: formatMessage({ id: 'app.settings.basic.nickname-message' }, {}),
                  },
                ],
              })(<input>)}
            
            
              {getFieldDecorator('profile', {
                rules: [
                  {
                    required: true,
                    message: formatMessage({ id: 'app.settings.basic.profile-message' }, {}),
                  },</form></div></div>

getPageTitle = (pathname: any, breadcrumbNameMap: any) => {
    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`;
  };

}
          ]
        })(
          <input type="mobile" size="large">}
            placeholder={`${formatMessage({ id: 'app.login.mobile' })}`}
          /&gt;
        )}
      
      
        {getFieldDecorator('code', {
          rules: [
            {
              required: true,
              message: formatMessage({ id: 'validation.verification-code.required' })
            }
          ]
        })(
          <input type="key" maxlength="{6}" autocomplete="off" size="large">}
            placeholder={`${formatMessage({ id: 'app.login.verification-code' })}`}
            suffix={
              
            }
          /&gt;
        )}

};
    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; {},
    });
  });
} else if ('serviceWorker' in navigator) {

if (this.loginForm) {
                  this.loginForm.validateFields(this.handleSubmit);
                }
              }}
            />
          
          
            {status === 'error' &&
              loginType === 'mobile' &&
              !submitting &&
              this.renderMessage(
                formatMessage({ id: 'user-login.login.message-invalid-verification-code' }),
              )}

breadcrumbRender={(routers = []) => {
          return [
            {
              path: '/',
              breadcrumbName: formatMessage({
                id: 'menu.home',
                defaultMessage: 'Home',
              }),
            },
            ...routers,
          ];
        }}
        footerRender={footerRender}