为什么没有注入 portalcontent？

Question

我试图了解 React 门户，因此我在名为 MasterLayout 的组件中为 header 内容创建了一个门户根目录：

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

在这个组件中它抛出一个错误：

TypeError: Cannot read property 'appendChild' of undefined

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

正在尝试从另一个名为 FlexStuff 的组件将内容注入此 portalRoot：

 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 内容？ Link to github

Answer 1

错误的原因是 Header 组件没有呈现通过 props 传递的子项，因此 portalRoot div 永远不会被挂载并且 ref 保持未定义。

要修复它，请更改 Header 组件以呈现子项：

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

为什么没有注入 portalcontent？

Why is portalcontent not injected?

reactjs

styled-components