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

您可以使用ReactDOMServer.renderToStaticMarkup评估子组件。它将jsx元素转换为字符串。

import ReactDOMServer from 'react-dom/server';


const App = (props) => {
  const isNull = isChildNull(props.children);
  if (isNull) {
    return "render null";
  }
  return <div>{props.children}</div>;
}

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

Answer 2

您可以通过阅读儿童道具来检查组件是否有儿童，连同React.Children.count的代码将是：

int64

Answer 3

您可以在将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;
   ...
}

Answer 4

我们用钩子进行了黑客攻击：（

如果您有兴趣并获得更好的理解，请查看一下。

也许有人知道如何优化它，现在它已经是预渲染了

https://codesandbox.io/s/x7489l2lo

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

4 个答案: