如何将此Jquery代码转换为React JS？

Question

我已在ComponentDidMount（）{}中的.jsx文件中使用了此Jquery代码。

但是我想用ReactJS编写它。我该怎么办？

$(document).on("mouseenter", ".owl-item", function() {
      // $(this).css('border','5px solid red')
      $(this)
        .prevAll(".active")
        .addClass("hover-prev");
      $(this)
        .nextAll(".active")
        .addClass("hover-next");
    });
$(document).on("mouseout", ".owl-item", function() {
      $(this)
        .prevAll(".active")
        .removeClass("hover-prev");
      $(this)
        .nextAll(".active")
        .removeClass("hover-next");
    });

代码的

html（已在轮播本身中预定义了使用的react owl轮播...“。owl-item”）

<OwlCarousel ref="car" options={options}>
            <div>
              <img src={Actor} class="circleBase" alt="Cinque Terre" />
              <div className="h6 text-center mt-2">Cast Name</div>
            </div>

            <div>
              <img src={Actor} class=" circleBase " alt="Cinque Terre" />
              <div className=" h6 text-center mt-2">Cast Name</div>
            </div>

            <div>
              <img src={Actor} class=" circleBase" alt="Cinque Terre" />
              <div className="h6 text-center mt-2">Cast Name</div>
            </div>

            <div>
              <img src={Actor} class=" circleBase" alt="Cinque Terre" />
              <div className="h6 text-center mt-2">Cast Name</div>
            </div>
            <div>
              <img src={Actor} class=" circleBase" alt="Cinque Terre" />
              <div className="h6 text-center mt-2">Cast Name</div>
            </div>
            <div>
              <img src={Actor} class=" circleBase" alt="Cinque Terre" />
              <div className="h6 text-center mt-2">Cast Name</div>
            </div>
            <div>
              <img src={Actor} class=" circleBase" alt="Cinque Terre" />
              <div className="h6 text-center mt-2">Cast Name</div>
            </div>
            <div>
              <img src={Actor} class=" circleBase type" alt="Cinque Terre" />
              <div className="h6 text-center mt-2">Cast Name</div>
            </div>
          </OwlCarousel>