为什么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 | }

试图将内容插入从名为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

错误的原因是头组件未通过渲染过的道具的孩子，所以portalRoot DIV永远不会安装和裁判撑不定。

要修复它改变头组件以使孩子们：

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