如何使用 react-i18next 的 <Trans /> 进行 alt 图片翻译？

Question

我有一个问题应该（希望）很容易解决。我已经在我的项目中安装了 react-i18next 并且一切正常，我可以在 classes 的功能组件中进行翻译，但我现在唯一的问题是在 class 组件中，特别是关于 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)

如何使用 react-i18next 的 <Trans /> 进行 alt 图片翻译？

How to use <Trans /> of react-i18next for an alt image translation?

javascript

translation

jsx

i18next

reactjs