React：如果子组件不返回null，则将其包装到div中

Question

使用React，如果一个子组件在呈现时不返回null，它如何有条件地包装到另一个元素中？

export const Parent = ({children}) => (
  <div className="row">
    {React.Children.map(children, child =>
      <div className="col-6 col-s-4 col-md-3">
        {child}
      </div>
    )}
  </div>
);

这可能与React component children detect if empty/null before render中的讨论有关。但是，建议的方法似乎都不起作用（ReactDOMServer.renderToStaticMarkup似乎与SSR有问题，React.isValidElement始终将返回null的组件视为有效元素）。我有一种感觉，这是一种反模式，因为这似乎真的很难做到。目前我能想到的唯一解决方案是将列div移动到子组件中，并将一个道具克隆到子组件中，以通知它需要一个包装列div。。。这似乎有点老套。

Answer 1

如果你不想使用

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

尝试：

const isChildNull = children => {
  return Boolean(children.type() === null); //--> will return the tag type
};

编辑：此处的工作示例：https://stackblitz.com/edit/react-a29daw