Question

我想这样做：

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

这让我做到了：

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

我想做前者的原因是因为渲染的孩子设置了基于所有者的上下文。但是如果我用包装器渲染它们那么作为父元素的元素没有设置它的上下文。然后生成警告：

对于密钥（x）

基于所有者和基于父的上下文不同（值：undefined vs [object Object]）

此处讨论：https://gist.github.com/jimfb/0eb6e61f300a8c1b2ce7

但没有提供解决方案。

出现警告是因为呈现孩子的组件是所有者＆＃39;这就是设置上下文，但div包装元素是父母＆＃39;并没有背景。我的想法是摆脱div。但我无法摆脱它。

Answer 1

我已使用以下代码仅在<span>子项上使用包装text：

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

Answer 2

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

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

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

Answer 3

使用React 16 =>

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

或

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

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

3 个答案: