在 React 中，如何将元素作为 Prop 和 Render 传递，而不将元素包裹在它周围

Question

我正在使用React 16.2。我有一个组件来渲染一个弹出窗口，其工作原理如下：

<WindowPopOut
  trigger={<Button>Open Window PopUp</Button>}
  ....
/>

然后。。。

class WindowPopOut extends Component {
  ...
  render() { 
    const clonedTrigger = React.cloneElement(trigger, {
      onClick: this.handleTriggerClick,
    });
    return (
      <div>
        {clonedTrigger}
        ...
      </div>
    );
  }
}

问题是这在 DOM 中呈现如下：

<div><Button>Open Window PopUp</Button></div>

如何在没有 DIV 包装的情况下进行WindowPopOut渲染？因此，该组件仅呈现：

<Button>Open Window PopUp</Button>

Answer 1

你试过用React.Fragment包装吗？

return (
  <React.Fragment>
    {clonedTrigger}
    ...
  </React.Fragment>
);

反应文档