如何在Redux类组件中使用formatMessage

Question

尝试在类组件上使用"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“”

我该如何解决这个问题呢？

Answer 1

来自docs的。

您应该用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