时间戳

首页 > 解决方案 > 如何在 Redux 类组件上格式化消息

reactjs - 如何在 Redux 类组件上格式化消息

问题描述

试图在类组件上使用“formatMessage”。

但它不起作用；

import { injectIntl } from "react-intl";
......
  render() {
    const {formatMessage} = this.props.intl;
      return (
          <div class="card card-custom">
            <div class="card-header flex-wrap border-0 pt-6 pb-0">
              <div class="card-title">
                <h3 class="card-label">{formatMessage({ id: "LOCATION.INDEX.TITLE" })}
                <span class="d-block text-muted pt-2 font-size-sm">light head and row separator</span></h3>
              </div>
            </div>
            <div class="card-body">
              <table ref="main" class="table table-striped- table-hover table-checkable" />
            </div>
          </div>);
  }
}

export default connect(
  ({ auth }) => ({ authToken: auth.authToken }),
  auth.actions
)(DataTable);

它返回

TypeError：无法读取未定义的属性“formatMessage”

我该如何解决这个问题？

标签： reactjsintl

解决方案

从文档。

你应该用injectIntl

import { injectIntl } from "react-intl";
......
  render() {
    const {formatMessage} = this.props.intl;
      return (
          <div class="card card-custom">
            <div class="card-header flex-wrap border-0 pt-6 pb-0">
              <div class="card-title">
                <h3 class="card-label">{formatMessage({ id: "LOCATION.INDEX.TITLE" })}
                <span class="d-block text-muted pt-2 font-size-sm">light head and row separator</span></h3>
              </div>
            </div>
            <div class="card-body">
              <table ref="main" class="table table-striped- table-hover table-checkable" />
            </div>
          </div>);
  }
}

export default connect(
  ({ auth }) => ({ authToken: auth.authToken }),
  auth.actions
)(injectIntl(DataTable)); // here we use injectIntl HOC

推荐阅读