-1

我正在使用 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 包装父级时，情况并非如此......

4

2 回答 2

0

这个问题非常愚蠢...

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

基本上

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

于 2019-06-20T15:47:09.547 回答
-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>
    )
}
于 2019-06-20T02:58:45.743 回答