解决方案1：

得到孩子type。null如果Child组件返回 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>
   );
}

使用解决方案 1 的工作示例

您可以通过阅读 children props和React.Children.count来检查组件是否有子组件，代码将是：

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

您可以在应用 React.Children.count 之前添加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;
   ...
}

除了其他解决方案，如果您想检查子项是否为空字符串，您可以执行以下测试：

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

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

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