[英]Can't use props when passing { t } (from i18n-react) to stateless component
I have the parent component 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
component tries to map over the received prop to render a list of elements: 并且
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);
For some reason, the component always thinks that the recordEditHistory
prop is undefined. 由于某些原因,组件始终认为
recordEditHistory
道具未定义。 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...? 可能是因为我使用i18n并使用
withNamespaces
对props或...进行了某些处理吗? 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. 重要提示: {t}来自i18n-react,我用它来将界面翻译成英文然后再翻译回来。 I tried removing it completely and it didn't help.
我尝试将其完全删除,但没有帮助。
EDIT : I tried removing the { t }
method and removing withNamesSpaces()
HOC from the export and it all works now. 编辑 :我尝试从导出中删除
{ t }
方法并删除withNamesSpaces()
HOC,并且现在一切正常。 But now i can't use i18n-react
in this component :( 但是现在我不能在此组件中使用
i18n-react
了:(
I think the problem is with the component params: 我认为问题在于组件参数:
const ChangeHistoryCard = ({ t }, props) => ();
Should be: 应该:
const ChangeHistoryCard = (props) => ();
the signature of functional component only get props 功能组件的签名仅获得道具
https://reactjs.org/docs/components-and-props.html
https://reactjs.org/docs/components-and-props.html
Conceptually, components are like JavaScript functions.
从概念上讲,组件就像JavaScript函数。 They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
它们接受任意输入(称为“ props”),并返回描述应该在屏幕上显示的内容的React元素。
change 更改
const ChangeHistoryCard = ({ t }, props) => ();
to 至
const ChangeHistoryCard = (props) => ();
So, if you read the second edit, you would know that if I remove i18n
from the component completely, it all seems to work. 因此,如果您阅读了第二份编辑,您将知道,如果我从组件中完全删除
i18n
,那么一切似乎都可以正常进行。
That's great, but I really wanted the i18n
to stay, so I found a better way: 太好了,但是我真的很想让
i18n
留下,所以我找到了一个更好的方法:
Instead of passing { t }
to the component, you can import 'i18next'
and call t
as a method of that. 您可以
import 'i18next'
并将其作为方法调用t
,而不是将{ t }
传递给组件。
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);
Becomes 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. 在保持道具不变且可用的状态下,
i18n
保持原状。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.