React 子组件在渲染前检测是否为空/null

Question

“反应”：“16.8.4”

您好，有人知道如何检查（功能）组件中是否存在子组件（在渲染它们之前）

React.Children.count
React.Children.toArray(children)

不会工作

孩子们是$$typeof: Symbol(react.element)

代码示例是

function ContextMenuItems(): JSX.Element | null {
   if (no-items) return null;  
   ...
}

class ContextMenu extends React.Component {
   public render(): JSX.Element | null {
      if (this.props.children === null) { //ContextMenuItems empty check
        return null;
       }
       return <ContextMenu>{this.props.children}</ContextMenu>
   }
}

如有任何帮助，感谢您的想法

Answer 1

解决方案一：

让孩子们type。如果Child 组件返回null，它将返回null：

const isChildNull = children => {
  return Boolean(children.type()=== null);
};

解决方案 2：

使用ReactDOMServer.renderToStaticMarkup。它将jsx 元素转换为string。如果 children 返回 null 那么renderToStaticMarkup 将返回一个空字符串：

import ReactDOMServer from 'react-dom/server';

const isChildNull = children => {
  return !Boolean(ReactDOMServer.renderToStaticMarkup(children));
};

用法：

const Child = () => {
  return null;
};
    
const Parent = ({ children }) => {
  const isNull = isChildNull(children);
  if (isNull) {
     return "render null";
  }
  return <div>{children}</div>;
};
    
export default function App() {
   return (
     <Parent>
        <Child />
     </Parent>
   );
}

Working example using solution 1

Answer 2

您可以通过阅读 children 属性以及 React.Children.count 来检查组件是否有子组件，代码如下：

function ContextMenuItems({ children }): JSX.Element | null {
   if (!React.Children.count(children)) return null;
   ...
}

Answer 3

除了其他解决方案，如果你想检查一个孩子是否是一个空字符串，你可以做以下测试：

!React.isValidElement(children) && children === ""

它帮助我做了一个辅助组件，如果作为子组件提供的组件是空字符串，它可以编写文本：

const EmptyTextHelper = ({ children }: { children?: React.ReactNode }) => !React.isValidElement(children) && children === "" ? (
<span className="italic">No text</span>) : (
<>{children}</>);

Answer 4

您可以在应用 React.Children.count as 之前添加 isValidElement 检查

function getValidChildren(children) {
  return React.Children.toArray(children).filter((child) =>
    React.isValidElement(child)
  ) as React.ReactElement[]
}

function ContextMenuItems({ children }): JSX.Element | null {
   if (!React.Children.count(getValidChildren(children))) return null;
   ...
}

Answer 5

在您的父级渲染时，子级不会渲染；您只能访问描述它们的元素。因此，您可以检查元素本身是 null 还是空字符串，正如其他答案所描述的那样。但是，如果它是一个有效的元素，很遗憾，您无法看到子组件是否从其渲染中返回 null。

要解决此问题，您可以手动渲染它，因为@lissettdm 有described。但请注意，它会渲染孩子两次；一次是手动的，一次是小时候正常的。并且尝试通过type() 进行渲染可能通常会起作用，但有caveats。这并不理想。

通过 CSS 隐藏

如果您只是希望避免在 DOM 中没有子级时在屏幕上显示父级；例如。您不想要一个空的上下文菜单，那么您可以考虑使用简单的 CSS 并使用 :empty selector 定位您的父级，以这种方式隐藏它。

.hidden-if-empty:empty {
  display: none;
}

const ContextMenu = ({ children }) => {
  return <foo className="hidden-if-empty">{children}</foo>
}

通过 CSS 回退

如果需要显示后备，可以使用CSS content。

或者，使用:only-child selector:

.fallback {
  display: none;
}
.fallback-if-empty .fallback:only-child {
  display: block;
}

const ContextMenu = ({ children }) => (
  <foo className="fallback-if-empty">
    {children}
    <bar className="fallback">Nothing to see here!</bar>
  </foo>
);