Question

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

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

然后......

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

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

WindowPopOut

如何在没有DIV包装的情况下渲染<Button>Open Window PopUp</Button>？所以该组件只是呈现：

readtable

Answer 1

您是否尝试使用React.Fragment包裹？

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

React docs

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

1 个答案: