Нельзя использовать реквизит при передаче {t} (из i18n-реагировать) в компонент без состояния - PullRequest
Новая
       22

Нельзя использовать реквизит при передаче {t} (из i18n-реагировать) в компонент без состояния

0 голосов
/ 11 декабря 2018

У меня есть родительский компонент, который имеет состояние: 

class RecordEdit extends PureComponent {
    state = { 
        allRecordData: {},
        changelog: [
            {hello1: '1'},
            {hello2: '2'}
        ]
    }

Он пытается отрендерить своего потомка и передать ему реквизит: 

<div className='cards-container'>
    <ChangeHistory recordEditHistory={this.state.changelog} />
</div>

И компонент ChangeHistoryпытается отобразить полученную реквизит для отображения списка элементов: 

const ChangeHistoryCard = ({ t }, props) => (
  <CardOuterContainer recordEditHistory={props.recordEditHistory}>
    <h1>{t('История изменений')}</h1>
    {
      props.recordEditHistory &&
      props.recordEditHistory.map(item =>
        <p>{t('Последнее изменение')}: <span>[22.11.2018]</span></p>
      )
    }
  </CardOuterContainer>
);
export default withNamespaces()(ChangeHistoryCard);

По какой-то причине компонент всегда думает, что реквизит recordEditHistory не определен.Но если щелкнуть по нему в инспекторе, я вижу, что значение успешно передано:

Props of ChangeHistoryCard

Я не понимаю проблему.Может ли это быть потому, что я использую i18n , а использование withNamespaces делает что-то с реквизитом или ...?Мне нужно понять, как решить эту проблему.

ВАЖНО: {t} из i18n-реагирует, я использую его для перевода интерфейса на английский и обратно.Я попытался удалить его полностью, и это не помогло.

EDIT : я попытался удалить метод { t } и удалить withNamesSpaces() HOC из экспорта, и теперь все работает.Но теперь я не могу использовать i18n-react в этом компоненте: (

Ответы [ 3 ]

0 голосов
/ 11 декабря 2018

подпись функционального компонента только получить реквизит

https://reactjs.org/docs/components-and-props.html

Концептуально, компоненты похожи на функции JavaScript.Они принимают произвольные входные данные (называемые «реквизитами») и возвращают элементы React, описывающие то, что должно появиться на экране.

изменить 

const ChangeHistoryCard = ({ t }, props) => ();

на 

const ChangeHistoryCard = (props) => ();
0 голосов
/ 11 декабря 2018

Итак, если вы прочитаете второе редактирование, вы будете знать, что, если я полностью удаляю i18n из компонента, все это, похоже, работает.

Это здорово, но я действительно хотел i18nчтобы остаться, поэтому я нашел лучший способ:

Вместо передачи { t } компоненту, вы можете import 'i18next' и вызвать t в качестве метода этого.

Так что: 

import { withNamespaces } from 'react-i18next';

const ChangeHistoryCard = ({ t }, props) => (
  <CardOuterContainer recordEditHistory={props.recordEditHistory}>
    <h1>{t('История изменений')}</h1>
    {
      props.recordEditHistory &&
      props.recordEditHistory.map(item =>
        <p>{t('Последнее изменение')}: <span>[22.11.2018]</span></p>
      )
    }
  </CardOuterContainer>
);
export default withNamespaces()(ChangeHistoryCard);

Получается так: 

import { withNamespaces } from 'react-i18next';
import i18next from 'i18next';

const ChangeHistoryCard = (props) => (
  <CardOuterContainer recordEditHistory={props.recordEditHistory}>
    <h1>{i18next.t('История изменений')}</h1>
    {
      props.recordEditHistory &&
      props.recordEditHistory.map(item =>
        <p>{i18next.t('Последнее изменение')}: <span>[22.11.2018]</span></p>
      )
    }
  </CardOuterContainer>
);


export default withNamespaces()(ChangeHistoryCard);

Thay way i18n остается на месте, а подпорки остаются нетронутыми и пригодными для использования.

0 голосов
/ 11 декабря 2018

Я думаю, что проблема с параметрами компонента:

const ChangeHistoryCard = ({ t }, props) => ();

Должно быть:

const ChangeHistoryCard = (props) => ();

...