反应：如果DOM子级为空，则避免呈现组件的根DOM元素

Question

我有一个React组件，它接收children并将它们包装在DOM元素中：

const MyComponent = ({ children }) => <div>{children}</div>;

当children解析为0个DOM节点时，我想跳过渲染容器DOM元素（div在此示例中）。

（这是因为容器DOM元素可能会贡献语义或样式，如果该元素将为空，则我们不需要/不需要）。

例如

const MySubComponent = () => null;

declare const maybeChild: string | undefined;
const el = <MySubComponent />;

const el = (
  <MyComponent>
    {maybeChild}
    {el}
  </MyComponent>
)

在此示例中，最终的DOM为<div></div>。

大概我应该通过计算内部DOM子代的数量MyComponent（使用此子代作为呈现内容的条件）来执行此操作，但是似乎没有一种简便的方法来执行此操作。（React.ChildrenAPI指的是React节点树中的子节点，而不是DOM，因此在这种情况下似乎没有帮助。）

我知道的一种解决方案是确保React节点到DOM节点的1：1映射。但是，这似乎是不切实际的，因为组件内部经常具有渲染条件。

Answer 1

觉得这个问题应该重新设计。我知道这不是一个令人满意的解决方案，但是子级实际上可能包含数百个DOM节点，而且深度可能很深。进行此操作并不明智。同样，在将孩子的实现细节向其父对象公开时，应该有一个一般的犹豫。如果您真的想这样做，我会考虑React refs，但是它们仅在初始渲染后可用。