如何通过反应组件内的另一个节点包装反应节点答案

【问题标题】：How to wrap a react node by another node inside a react component如何通过反应组件内的另一个节点包装反应节点
【发布时间】：2019-08-01 19:05:25
【问题描述】：

我在我的反应应用程序中使用 owl-react-carousel。 owl carousel 在组件渲染后注入一些 div。我想使用 react-dom 创建一个 div，然后想包装 owl carousel 注入的 div。试图说得更清楚

 class Items extends Component {
  render() {
      return (
        <div className="item"></div>
      )
  }
}

在渲染这个组件后，owl carouse 会在项目类中注入一些节点。如下所示

<div className="item">
    <div className="owl-nav"></div>
</div>

现在我想创建自己的 div，然后想包装 owl-nav div

预期：想要创建新节点<div className="custom-nav"></div> 组件应该看起来像

<div className="item"> 
        <div className="custom-nav">
           <div className="owl-nav"></div>
        </div>
    </div>

【问题讨论】：

标签： reactjs react-dom

【解决方案1】：

我可以做到这一点

componentDidMount() {
const appNode = ReactDOM.findDOMNode(this);
var searchingElement = appNode.querySelector("div.owl-nav");
  var wrapperElement = document.createElement("div");
  wrapperElement.setAttribute("class", "custom-nav");
  searchingElement.parentNode.insertBefore(
    wrapperElement,
    searchingElement
  );
  wrapperElement.appendChild(searchingElement);
}

它符合我的要求，但我不想在反应中直接使用文档，所以尝试了 react.createElement 但它说包装器不是节点

【讨论】：