將{t}（從i18n-react）傳遞到無狀態組件時，不能使用props

Question

我有狀態的父組件：

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

它嘗試渲染其子代並將道具傳遞給它：

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

並且ChangeHistory組件嘗試在接收到的prop上映射以呈現元素列表：

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道具未定義。 但是，如果在檢查器中單擊它，我可以看到該值已成功傳遞：

我不明白這個問題。 可能是因為我使用i18n並使用withNamespaces對props或...進行了某些處理嗎？ 我必須考慮如何解決這個問題。

重要提示： {t}來自i18n-react，我用它來將界面翻譯成英文然后再翻譯回來。 我嘗試將其完全刪除，但沒有幫助。

編輯 ：我嘗試從導出中刪除{ t }方法並刪除withNamesSpaces() HOC，並且現在一切正常。 但是現在我不能在此組件中使用i18n-react了：(

Answer 1

我認為問題在於組件參數：

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

應該：

const ChangeHistoryCard = (props) => ();

Answer 2

功能組件的簽名僅獲得道具

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

從概念上講，組件就像JavaScript函數。 它們接受任意輸入（稱為“ props”），並返回描述應該在屏幕上顯示的內容的React元素。

更改

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

至

const ChangeHistoryCard = (props) => ();

Answer 3

因此，如果您閱讀了第二份編輯，您將知道，如果我從組件中完全刪除i18n ，那么一切似乎都可以正常進行。

太好了，但是我真的很想讓i18n留下，所以我找到了一個更好的方法：

您可以import 'i18next'並將其作為方法調用t ，而不是將{ 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);

在保持道具不變且可用的狀態下， i18n保持原狀。