我对React还是很陌生，我想使用Owl Carousel2。我正在尝试将播放按钮图像添加到类名称为 .owl-的 div 上。猫头鹰轮播生成的点。

我尝试在jsx中定位.owl点：

render(){

const owlDots = document.querySelector('.owl-dots')
console.log(owlDots) // <div class='owl-dots'>...
...

现在的主要问题是播放按钮不固定。当猫头鹰传送带发射并开始自动播放时，它消失。我的蜘蛛感觉告诉我要使用另一种生命周期方法。但是哪一个呢？我该如何解决这个问题？我不知道从哪里开始。

我被困在这里

我想要的效果

import React,{ Component } from "react";
import ReactDOM from "react-dom";
import OwlCarousel from "react-owl-carousel2";
import "./owl/owl.carousel.css";
import "./styles.css";

class App extends Component {

componentDidmount() {
  const owlDots = document.querySelector('.owl-dots')
  const newEl = document.createElement('div')
  newEl.classList.add('playPause')
  if (this.state.autoplay) {
    newEl.innerHTML = '<svg class="playbutton" 
    xmlns="http://www.w3.org/2000/svg"><title>play</title><use 
    xlink:href="#icon-play"></use></svg>'
  } else {
     newEl.innerHTML = '<svg class="pausebutton" 
     xmlns="http://www.w3.org/2000/svg"><title>pause</title><use 
     xlink:href=#icon-pause></use></svg>'
  }
  owlDots.append(newEl)
  console.log(owlDots) // <div class='owl-dots'>...
}

 render() {
 const options = {
  items: 1,rewind: true,dots: true,autoplay: true
};

return (
  <div classname="App">
    <OwlCarousel options={options}>
      <div classname="item">
        <img src="http://placehold.it/1600x900" alt="null" />
        <h1 classname="owl-heading" style={{ fontSize: 100 }}>
          1
        </h1>
      </div>
      <div classname="item">
        <img src="http://placehold.it/1600x900" alt="null" />
        <h1 classname="owl-heading" style={{ fontSize: 100 }}>
          2
        </h1>
      </div>
    </OwlCarousel>
  </div>
 )}
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />,rootElement);

您可以在此处查看代码-> CodeSandbox