在 HTML 中找到 React 组件的位置

Question

元素已创建并附加到 table，我想找到特定元素的位置，我使用了 UseRef 钩子，

const inputRef = useRef(null);

动态创建的样子

    return (
      <td style={{ margin: "1rem", padding: "1rem" }}>
        <Datetime
          ref={inputRef}
          closeOnSelect={true}
          dateFormat="MMM yy"
          timeFormat={false}
        />
      </td>
    );
  }

在 UseEffect hook 中看起来像

我尝试了 OffsetTop 和 getBoundingClientRect。都没有帮助

    console.log(inputRef); //here no offsetTop is no there in current
    //console.log(inputRef.current.getBoundingClientRect());
  }, []);

outPut 在控制台中看起来如下所示。

{current: n}
current: n
props: Object
context: Object
refs: Object
updater: Object
_renderCalendar: ƒ () {}
_showView: ƒ () {}
viewToMethod: Object
nextView: Object
_updateDate: ƒ () {}
_viewNavigate: ƒ () {}
_setTime: ƒ () {}
_openCalendar: ƒ () {}
_closeCalendar: ƒ () {}
_handleClickOutside: ƒ () {}
_onInputFocus: ƒ () {}
_onInputChange: ƒ () {}
_onInputKeyDown: ƒ () {}
_onInputClick: ƒ () {}
state: Object
_reactInternals: FiberNode
_reactInternalInstance: Object
isReactComponent: Object
setState: ƒ () {}
forceUpdate: ƒ () {}
<constructor>: "n"

如何获取当前ref元素的位置

我在沙盒中的代码：

Answer 1

<html>
<head>
<style>
#test {
  top: 100px;
  margin: 10px;
  padding: 10px;
  width: 300px;
  position: relative;
  border: 5px solid black
}
</style>
</head>
<body>

<div>Just another Div </div> <!-- Remove this to see the value change !-->
<div>Just another Div </div> <!-- Remove this to see the value change !-->
<span>Just another Span </span> <!-- Remove this to see the value change !-->

<div id="test">
  <p>Click the button to get offsetTop for the test div.</p>
  <p><button onclick="myFunction()">Try it</button></p>
  <p>offsetTop is: <span id="demo"></span></p>
</div>

<script>
function myFunction() {
  var testDiv = document.getElementById("test");
  document.getElementById("demo").innerHTML = testDiv.offsetTop;
}
</script>

</body>
</html>

试试这个：offsetTop 每次都有效。

编辑：

对于列表，你可以在元素的ID上加上一个index/counter，这样就可以更容易地从DOM中获取ref。 Sandbox Link for React Demo

Answer 2

您可以通过 id 获取引用，然后可以应用 getBoundingClientRect()

这是您的代码

import Datetime from "react-datetime";
import "./styles.css";
import "react-datetime/css/react-datetime.css";
import { useEffect, useRef } from "react";

export default function App() {
  let table = [];
  const inputRef = useRef(null);
  useEffect(() => {
    let a = document.getElementById('input');
    console.log("answer",a.getBoundingClientRect()); //here no offsetTop is no there in current
    //console.log(inputRef.current.getBoundingClientRect());
  });
  function getRow() {
    return (
      <td style={{ margin: "1rem", padding: "1rem" }}>
        <div id="input">
        <Datetime
          ref={inputRef}
          closeOnSelect={true}
          dateFormat="MMM yy"
          timeFormat={false}
        />
        </div>.
      </td>
    );
  }
  function getRows() {
    let row = [];
    for (let index = 0; index < 6; index++) {
      row.push(getRow());
    }
    return <tr>{row}</tr>;
  }

  function getTable() {
    for (let index = 0; index < 10; index++) {
      table.push(getRows());
    }
    return table;
  }

  return (
    <div className="App">
      <table style={{ border: "solid 1px blue" }}>
        <tbody>{getTable()}</tbody>
      </table>
    </div>
  );
}

在 HTML 中找到 React 组件的位置

Find the position of the React component in HTML

javascript

reactjs

use-ref