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

错误的原因是Header组件未渲染通过props传递的子代，因此<xsl:variable name="spaces21" select="' '"/> <xsl:variable name="pad" select="(41 - string-length(SavingsSegment)) div 2"/> <text> <xsl:value-of select="substring($spaces21, 1, floor($pad))"/> <xsl:value-of select="SavingsSegment"/> <xsl:value-of select="substring($spaces21, 1, ceiling($pad))"/> </text> div永远不会挂载，并且ref保持未定义状态。

要解决此问题，请更改Header组件以呈现子代：

portalRoot

为什么未注入portalcontent？

1 个答案: