如何在React被包裹组件返回null时阻止HOC渲染多余分隔线

问题核心 #

现有多个React业务组件会根据传入props判断是否返回null，各组件props字段不统一。原本通过通用HOC给所有组件追加自定义分隔线，但存在缺陷：被包裹组件返回null时，HOC仍会渲染分隔线，产生大量孤立分隔线。要求不在每次使用HOC时单独校验业务组件props（避免重复代码），实现组件无内容时HOC整体不渲染。

原问题代码：

import React from 'react'
import ReactDOM from 'react-dom'

const withDivider = (Component) => {
  return ({ fancyDividerProp, ...props }) => (
    <>
      <Component {...props} />
      <hr some-fancy-prop={fancyDividerProp} />
    </>
  )
}

const SpicyComponent = ({isSpicy}) => {
  if (!isSpicy) return null
  return (
    <p>Spicy!</p>
  )
}
const SpicyWithDivider = withDivider(SpicyComponent)


const SweetAndSourComponent = ({isSweet, isSour}) => {
  if (!isSweet || !isSour) return null
  return (
    <p>Sweet&Sour!</p>
  )
}
const SweetAndSourWithDivider = withDivider(SweetAndSourComponent)


class App extends React.Component {
  render() {
    return (
      <div>
        <SpicyWithDivider isSpicy={false} />
        <SweetAndSourWithDivider isSweet={true} isSour={false} />
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
)

可行实现方案 #

方案1：通用HOC实现，无需感知业务组件props #

不需要在HOC里判断业务组件的props规则，通过DOM渲染检测的方式判断组件是否实际输出了内容，无内容时直接隐藏分隔线。该方案兼容类组件、函数组件，支持任意嵌套的组件逻辑，不会破坏原有组件的生命周期、hooks执行逻辑。

import React, { useState, useRef, useLayoutEffect } from 'react'

const withDivider = (Component) => {
  const WrappedComp = (props) => {
    const { fancyDividerProp, ...componentProps } = props
    const contentRef = useRef(null)
    const [showDivider, setShowDivider] = useState(true)

    // 阻塞浏览器绘制前完成检测，避免闪烁
    useLayoutEffect(() => {
      const hasRenderedContent = contentRef.current?.childNodes.length > 0
      setShowDivider(hasRenderedContent)
    })

    // 无内容时只渲染隐藏的检测容器，不输出分隔线
    if (!showDivider) {
      return (
        <div ref={contentRef} style={{ display: 'none' }}>
          <Component {...componentProps} />
        </div>
      )
    }

    return (
      <>
        {/* display: contents 不会生成额外DOM节点，不影响原有布局和样式 */}
        <div ref={contentRef} style={{ display: 'contents' }}>
          <Component {...componentProps} />
        </div>
        <hr some-fancy-prop={fancyDividerProp} />
      </>
    )
  }

  WrappedComp.displayName = `withDivider(${Component.displayName || Component.name || 'Component'})`
  return WrappedComp
}

方案2：改用通用包裹组件，灵活度更高 #

如果不想用HOC，也可以写一个通用包裹组件，逻辑和上述HOC一致，使用时直接包裹业务组件即可，不需要提前对每个业务组件做HOC包装，分隔线属性可以直接传入，更灵活：

import React, { useState, useRef, useLayoutEffect } from 'react'

const DividerWrapper = ({ children, dividerProps = {} }) => {
  const contentRef = useRef(null)
  const [showDivider, setShowDivider] = useState(true)

  useLayoutEffect(() => {
    const hasRenderedContent = contentRef.current?.childNodes.length > 0
    setShowDivider(hasRenderedContent)
  })

  if (!showDivider) {
    return (
      <div ref={contentRef} style={{ display: 'none' }}>
        {children}
      </div>
    )
  }

  return (
    <>
      <div ref={contentRef} style={{ display: 'contents' }}>
        {children}
      </div>
      <hr {...dividerProps} />
    </>
  )
}

// 使用示例
class App extends React.Component {
  render() {
    return (
      <div>
        <DividerWrapper dividerProps={{ 'some-fancy-prop': 'spicy' }}>
          <SpicyComponent isSpicy={false} />
        </DividerWrapper>
        <DividerWrapper dividerProps={{ 'some-fancy-prop': 'sweet-sour' }}>
          <SweetAndSourComponent isSweet={true} isSour={false} />
        </DividerWrapper>
      </div>
    )
  }
}

实现说明 #

• 用useLayoutEffect做内容检测，该钩子会在DOM更新完成、浏览器绘制前同步执行，不会出现短暂显示孤立分隔线的闪烁问题。
• 内容容器用display: contents样式，不会生成实际的渲染盒子，不会破坏原有布局、CSS选择器（比如相邻兄弟选择器、子元素选择器）的匹配逻辑，对原有业务代码无侵入。
• 即使组件内部嵌套多层组件、逻辑复杂，只要最终没有生成真实DOM节点，检测逻辑就会判定为无内容，自动隐藏分隔线，完全不需要感知业务组件的props规则。
• 如果业务组件使用Portal将内容渲染到其他DOM节点，可以通过增加额外的forceShowDivider属性手动控制分隔线显示，覆盖默认检测逻辑。

内容的提问来源于stack exchange，提问作者ConfusedPirate