reactjs - react : wrap child component in div if it does not return null

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 移动到子组件中，并将一个 Prop 克隆到子组件中，以通知它需要一个包装列 div ......这似乎很hacky。

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