React：如果 DOM 子项为空，则避免渲染组件的根 DOM 元素

Question

我有一个接收children 的 React 组件，将它们包装在一个 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>。

大概我应该通过计算 MyComponent 中的 DOM 子项的数量来做到这一点（使用此作为渲染内容的条件），但似乎没有一种简单的方法可以做这个。 （React.Children API 指的是 React 节点树中的子节点，而不是 DOM，因此在这种情况下这似乎没有帮助。）

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

Answer 1

这个问题感觉应该重新设计。我知道这不是一个令人满意的解决方案，但是孩子可能包含数百个 DOM 节点，并且它们的深度可能很密集。开始这件事并不谨慎。此外，在向其父级公开子级的实现细节时，应该普遍犹豫。如果您真的想这样做，我会关注React refs，但它们仅在初始渲染后可用。

Answer 2

您应该使用React.Fragment 并检查孩子。

例如

const MyComponent = ({ children }) => <React.Fragment>
    {children ? 
        <div>{children}</div> 
        : 
        null
    }
</React.Fragment>;

*我注意到你使用 typescript，我对 typescript 和如何检查不太了解，但如果你按照逻辑，我认为你可以使用 typescript 解决它

编辑：

所以你需要做的是检查孩子是否是一个有效的 React 元素。

检查您是否需要React.isValidElement

这是检查它是否有效的方法

const MyComponent = ({ children }) => {
  let valid = true;
  if (Array.isArray(children)) {
    for (let i = 0; i < children.length; i++) {
      if (!isValidElement(children[i])) {
        valid = false;
      }
    }
  } else {
    valid = isValidElement(children);
  }
  if (valid) {
    return <div>{children}</div>;
  }
  return null;
};

我创建了一个codesandbox 来检查是否有效。

使用React.isValidElement 你可以进行其他检查（可能只渲染有效的 React 组件）

再一次，很抱歉没有在打字稿中给出答案。

编辑：

如果这个解决方案仍然不能令人满意，因为元素可以渲染null，那么你应该看看lluisrojass的解释。