时间戳

首页 > 解决方案 > 使用 HOC 包装父级时反应子级

react-i18next - 使用 HOC 包装父级时反应子级

问题描述

我正在使用 React 16.8.6，并且具有以下结构：

page.js

<ParentComponent id="testData">
    <ChildComponent value={data => data.text} />
</ParentComponent>

父组件.tsx

export default class ParentComponent extends React.PureComponent<IParentProps> {
    ...
    render() {
        const items = this.props.children;
        <MiddleComponent items={items} />
    }
}

父容器.ts

import { withTranslation } from 'react-i18next';
import ParentComponent from './ParentComponent';

export default withTranslation()(ParentComponent);

我需要知道每个孩子MiddleComponent的元素类型内部（不是作为字符串，而是作为 React 元素，因为我将基于它创建一个新元素）（所以，在这种情况下我应该有ChildComponent），但是当我检查时有了铬，我所有的孩子都有一种I18nextWithTranslation类型......

知道如何解决这个问题吗？或者如果这可能是一个已知的错误？

如果我根本不使用任何 hoc，当我写child.type它时它会返回 me ChildComponent(props)。但是，当我使用 hocs 包装父级时，情况并非如此......

标签： react-i18nextreact-16

解决方案

这个问题非常愚蠢...

即使孩子没有作为默认值导出，我也将其<ChildComponent>作为默认导入导入。

基本上

import ChildComponent from ''代替import { ChildComponent } from ''

推荐阅读