为什么portalcontent没有注入?

问题描述 投票:0回答:1

我试图让我的头周围反应的门户网站,所以我创造了我称为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

reactjs styled-components
1个回答
1
投票

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

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

export class Header extends Component {
  render() {
    return (
      <div className="App">
        { this.props.children }
      </div>
    );
  }
}
热门问题
推荐问题
最新问题