在反应中，我可以在没有包装器的情况下渲染组件的子代吗？答案

【问题标题】：In react can I render a component's children without a wrapper?在反应中，我可以在没有包装器的情况下渲染组件的子代吗？
【发布时间】：2015-10-06 15:11:35
【问题描述】：

我想做：

  render: () ->
      {@props.children}

它让我这样做：

  render: () ->
      <div>{@props.children}</div>

我想做前者的原因是因为渲染的孩子有他们基于所有者的上下文集。但是如果我用包装器渲染它们，那么作为父元素的元素就没有它的上下文集。这会产生一个警告：

基于所有者和基于父的上下文不同（值：undefined 与 [object Object]）对于键 (x)

这里讨论：https://gist.github.com/jimfb/0eb6e61f300a8c1b2ce7

但没有提供解决方案。

出现警告是因为呈现子组件的组件是“所有者”并且正在设置上下文，但 div 包装器元素是“父”并且没有上下文。我的想法是摆脱 div。但我无法摆脱它。

【问题讨论】：

嗯，div 不应该影响上下文。您是否有更多代码，或者更好的是 JSBin 示例（特别是呈现此示例的组件，以及设置/使用上下文的位置）？
出于 CSS 原因，我也想这样做。
这是一个不相关的问题。事实上，我能够在没有封闭 div 元素的情况下渲染孩子。（冲突发生在 FluxMixin 添加的 Fluxxor 实例和与 react-router 一起使用的组件创建因子包装器添加的实例之间）。谢谢。

标签： reactjs

【解决方案1】：

我使用以下代码仅对 text 子级使用包装器 <span>：

render() {
  if (!this.props.children) {
    return null;
  } else if (React.isValidElement(this.props.children)) {
    return this.props.children;
  }
  return <span>{this.props.children}</span>;
}

【讨论】：

【解决方案2】：

使用 React 16=>

render() {
    return <React.Fragment>{this.props.children}</React.Fragment>;
}

或

render() {
    return <>{this.props.children}</>;
}

【讨论】：

【解决方案3】：

在需要一个孩子的情况下：

render() {
    return React.Children.only(this.props.children)
}

这就是 react-redux 在connect(), FWIW 中使用的。

【讨论】：