javascript - 如何使用react-i18next的进行替代图像翻译？

Question

我有一个问题应该(希望)很容易解决。我已经在我的项目中安装了react-i18next并且一切正常，我能够在功能组件、类中进行翻译，但我现在唯一的问题是在类组件中，特别是关于html属性，我说的是图像的 alt。

// ...
import { Translation, Trans } from 'react-i18next'

class MyComponent extends Component<MyComponentProps, MyComponentState> {
  constructor(props: MyComponentProps) {
    super(props)

    this.state = {
      isButtonVisible: true,
      isAnimationVisible: false,
      deadline: 0,
      countdown: ''
    }

    // ...
  }

  // ...

  render () {
    const { isButtonVisible, isAnimationVisible, deadline } = this.state

    return (
      <>
        <Trans>
          <img className={styles.exercise} src={lungs} alt={`${t('animation.lungs')} IDXXX`}  />
        </Trans>
      <>
    )
  }
}

其中 animation.lungs 是我在语言环境文件中的翻译，IDXXX 是不需要任何翻译的数字 ID。

t 未定义，它是有意义的，但这里的文档不清楚 https://react.i18next.com/legacy-v9/trans-component为我。您有解决办法吗？

提前致谢

Answer 1

您可以导入 withTranslation HOC 以便访问 t()。

import { Translation, Trans, withTranslation, WithTranslation } from 'react-i18next'

type MyComponentProps = {} & WithTranslation

class MyComponent extends Component<MyComponentProps, MyComponentState> {
  constructor(props: MyComponentProps) {
    super(props)

    this.state = {
      isButtonVisible: true,
      isAnimationVisible: false,
      deadline: 0,
      countdown: ''
    }

    // ...
  }

  // ...

  render () {
    const { isButtonVisible, isAnimationVisible, deadline } = this.state
    const { t } = this.props;

    return (
      <>
        <Trans>
          <img className={styles.exercise} src={lungs} alt={`${t('animation.lungs')} IDXXX`}  />
        </Trans>
      <>
    )
  }
}

export default withTranslation()(MyComponent)