Как пользоваться реакции-i18следующий для перевода альтернативного изображения? - PullRequest
Новая
       21

Как пользоваться реакции-i18следующий для перевода альтернативного изображения?

0 голосов
/ 02 февраля 2020

У меня есть проблема, которую (надеюсь) просто решить. Я установил react-i18next в свой проект, и все работает нормально, я могу иметь переводы в функциональных компонентах, в классах, но моя единственная проблема сейчас заключается в компоненте класса, особенно в отношении атрибута html, я говоря об альтернативе изображения. 

// ...
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 - это числовой идентификатор c, который не требует перевода.

t не определено и имеет смысл, но документация для меня неясна https://react.i18next.com/legacy-v9/trans-component. У вас есть идеи как это исправить?

Заранее спасибо

1 Ответ

1 голос
/ 02 февраля 2020

Вы можете импортировать withTranslation HO C, чтобы получить доступ к 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)
...