Почему Portalcontent не вводится?

Question

Я пытаюсь разобраться с реагирующими порталами, поэтому я создал корень портала для содержимого заголовка в моем компоненте с именем MasterLayout:

<div
    ref={portalRoot => {
    this.portalRoot = portalRoot;
 }}
/>

В этом компоненте выдается ошибка:

TypeError: Cannot read property 'appendChild' of undefined

     componentDidMount() {
      26 |   debugger
    > 27 |   this.portalRoot.appendChild(this.container);
         | ^  28 | }

Попытка внедрить содержимое в portalRoot из другого компонента FlexStuff:

 const PortalContent = (
      <SearchWidgetWrapper>
        <SearchWidgetContent justify="flex-end" mx="auto">
          <SearchContainer>
           <Box>portalcontent</Box>
          </SearchContainer>
        </SearchWidgetContent>
      </SearchWidgetWrapper>
    );

 return [
      <Box p={24} flex="1 0 auto" column>
              this is FlexStuff
      </Box>,
      ReactDOM.createPortal(PortalContent, HEADER_CONTAINER),
 ];

Почему я получаю эту ошибку?Как я могу добавить содержимое FlexStuff? Ссылка на github

Answer 1

Причина ошибки заключается в том, что компонент Header не отображает дочерние элементы, переданные через реквизиты, поэтому portalRoot div никогда не монтируется, а ссылка остается неопределенной.

Чтобы исправить это, измените компонент Header для рендеринга.дети:

export class Header extends Component {
  render() {
    return (
      <div className="App">
        { this.props.children }
      </div>
    );
  }
}