如何避免在Reactjs中使用document.getElementById？

Question

我应该怎么做才能避免在reactjs中使用文档。

var para = document.createElement("div");
var element = document.getElementById("d");
para.style.display = "block";
element.appendChild(para);
para.classList.add("con3");
para.style.left = c;

function getcord(e) {
  let d = document.getElementById('c');
  let f = document.getElementById('d');
  let leftPos = f.getBoundingClientRect().left;
  let currPos = e.clientX;
  let show = currPos - leftPos;
  console.log(show, leftPos);
  return show + "px";
}

function hover(e) {
  let d = document.getElementById('c');
  d.style.left = getcord(e);
}

function myclick(e) {
  let c = getcord(e);
  var para = document.createElement("div");
  var element = document.getElementById("d");
  para.style.display = "block";
  element.appendChild(para);
  para.classList.add("con3");
  para.style.left = c;
}

.dis {
  width: auto;
  position: relative;
  margin: 90px;
  height: 10px;
  background-color: #000;
  border: 1px solid black;
}

.dis:hover .con3 {
  display: block;
}

.con3 {
  position: absolute;
  height: 30px;
  left: 0;
  top: -2px;
  display: none;
  width: 30px;
  border-radius: 50%;
  background-color: red;
}

<div class="dis" onmousemove="hover(event)" onclick="myclick(event)" id="d">
  <div class="con3" id="c"></div>
</div>

我只想在Reactjs中找到整个代码。     我知道如何在reactjs中编写代码。但我限制在我的项目中使用document.getElementById。     所以我如何避免这个元素并以反应方式写入     请任何人帮助我。我是新人的反应。