如何在 Redux Class 组件上使用 formatMessage

Question

正在尝试在 class 组件上使用“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);

它returns

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

如何在 Redux Class 组件上使用 formatMessage

How to us formatMessage on Redux Class Component

intl

reactjs