javascript - Can't use props when passing { t } (from i18n-react) to stateless component - Stack Overflow

admin管理员组

文章数量:1403500

I have the parent ponent that has the state:

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

It tries to render its child and pass the prop to it:

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

And the ChangeHistory ponent tries to map over the received prop to render a list of elements:

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);

For some reason, the ponent always thinks that the recordEditHistory prop is undefined. But if a click on it in the inspector, I can see that the value has been passed successfully:

I don't understand the problem. Can it be because I use i18n and using withNamespaces does something with props or...? I have to idea how to approach this problem.

IMPORTANT: { t } is from i18n-react, I use it to translate the interface to English and back. I tried removing it pletely and it didn't help.

EDIT: I tried removing the { t } method and removing withNamesSpaces() HOC from the export and it all works now. But now i can't use i18n-react in this ponent :(

I have the parent ponent that has the state:

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

It tries to render its child and pass the prop to it:

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

And the ChangeHistory ponent tries to map over the received prop to render a list of elements:

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);

For some reason, the ponent always thinks that the recordEditHistory prop is undefined. But if a click on it in the inspector, I can see that the value has been passed successfully:

I don't understand the problem. Can it be because I use i18n and using withNamespaces does something with props or...? I have to idea how to approach this problem.

IMPORTANT: { t } is from i18n-react, I use it to translate the interface to English and back. I tried removing it pletely and it didn't help.

EDIT: I tried removing the { t } method and removing withNamesSpaces() HOC from the export and it all works now. But now i can't use i18n-react in this ponent :(

• javascript
• reactjs
• ecmascript-6
• internationalization
• i18next

Share Improve this question Follow edited Dec 11, 2018 at 13:15 asked Dec 11, 2018 at 13:00 user6898463user6898463 4

• 1 What is the { t } in the signature? Are you destructuring the params? – Meir Commented Dec 11, 2018 at 13:04
• @Meir { t } is from i18n-react, I use it to translate the interface to English and back. I tried removing it pletely and it didn't help. – user6898463 Commented Dec 11, 2018 at 13:07
• Why don't you just import it the normal way and then just reference it? import justPickAnyName from 'package-name'; And then just use it like this: justPickAnyName.t('message key'); – Amsvartner Commented Dec 11, 2018 at 13:30
• @Amsvartner yeah, I did it already, check out my answer below. I didn't know I could do that, first time using i18n, kinda went over the 'how-to' articles. – user6898463 Commented Dec 11, 2018 at 13:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

I think the problem is with the ponent params:

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

Should be:

const ChangeHistoryCard = (props) => ();

So, if you read the second edit, you would know that if I remove i18n from the ponent pletely, it all seems to work.

That's great, but I really wanted the i18n to stay, so I found a better way:

Instead of passing { t } to the ponent, you can import 'i18next' and call t as a method of that.

So this:

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);

Bees this:

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 stays in place, while props remain untouched and usable.

the signature of functional ponent only get props

https://reactjs/docs/ponents-and-props.html

Conceptually, ponents are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

change

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

to

const ChangeHistoryCard = (props) => ();

本文标签： javascriptCan39t use props when passingt(from i18nreact) to stateless componentStack Overflow