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元素，因为我将基于它创建一个新元素）（因此，在这种情况下，我应该拥有ChildComponent），但是当我用chrome检查时，我所有的孩子都拥有I18nextWithTranslation类型...

有人知道如何解决此问题吗？还是这可能是一个已知的错误？

如果我根本不使用任何临时工具，当我写child.type时，它将返回我ChildComponent(props)。但这不适用于我使用hocs包裹父对象的情况...

Answer 1

这个问题很愚蠢...

即使未将孩子默认导出，我仍将<ChildComponent>导入为默认导入。

基本上

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

Answer 2

在下面的示例中，我们在组件上设置了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>
    )
}

使用HOC包裹父对象时反应孩子的

2 个答案: