Реагировать на детей при использовании HOC, чтобы обернуть родителя - PullRequest
Новая
       24

Реагировать на детей при использовании HOC, чтобы обернуть родителя

0 голосов
/ 20 июня 2019

Я использую 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 тип элемента ( не как String, а как элемент React, так как я собираюсь создать новый элемент на его основе )каждого ребенка (так, в данном случае у меня должен быть ChildComponent), но когда я проверяю с помощью хрома, все мои дети имеют тип I18nextWithTranslation ...

Есть идеи, как это исправить?Или, если это, возможно, известная ошибка?

Если я вообще не использую hoc, когда я пишу child.type, он возвращает мне ChildComponent(props).Но это не так, когда я использую hocs, чтобы обернуть родителя ...

Ответы [ 2 ]

0 голосов
/ 20 июня 2019

Проблема была очень глупой ...

Я импортировал <ChildComponent> как импорт по умолчанию, хотя дочерний объект не был экспортирован по умолчанию.

В основном

import ChildComponent from '' вместо import { ChildComponent } from ''

0 голосов
/ 20 июня 2019

В приведенном ниже примере мы устанавливаем 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>
    )
}
...