使用 HOC 包装 parent 时反应 children

Question

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

page.js

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

parentComponent.tsx

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

ParentContainer.ts

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

export default withTranslation()(ParentComponent);

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

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

如果我根本不使用任何 hoc，当我写 child.type 时它 returns 我 ChildComponent(props)。但当我使用 hocs 包装 parent...

时，情况并非如此

Answer 1

在下面的示例中，我们在组件上设置 Component.displayName，以便我们可以在父级中访问属性。这是一个非常简单的示例，如果需要，可以扩展为使用一组子项。

const ChildComponent = () => {
    return <div>child render</div>
}

ChildComponent.displayName = "MyComponentName"

const ParentComponent = ({ children }) => {
    // This is the type of component.. should output "MyComponentName"
    const childType = children.type.displayName

    return (
        <div>
            <h1>Render Children</h1>

            {children}
        </div>
    )
}

function App() {
    return (
        <ParentComponent>
            <ChildComponent />
        </ParentComponent>
    )
}

Answer 2

这个问题很愚蠢...

我正在导入 <ChildComponent> 作为默认导入，即使子项没有作为默认导出。

基本上

import ChildComponent from '' 而不是 import { ChildComponent } from ''

使用 HOC 包装 parent 时反应 children

React children's when using HOC to wrap parent

react-i18next

react-16