如何在 react.js 中獲取容器的偏移坐標？

Question

我有一個呈現容器的 class 組件。 我想在容器內打印該容器的偏移量。 下面的反應代碼應該解釋我想要做什么：

  render() {
    return (
      <div onPointerDownCapture={this.started} onPointerLeave={this.ended} onPointerUpCapture={this.ended} onMouseMove={this.handleMouseMove} className='gesture-view'>
        {this.state.x || this.state.y ? "The mouse is at x: " + (this.state.x) + ", y: " + (this.state.y) : "Move the mouse over this box"}
        {"This is the offset: "container.offsetX}
      </div>
    );
  }

從根本上說，我想創建一個容器，其中包含描述容器相對於整個可見視圖的 position 的文本。 我在 css 中設置了 position 和容器的寬度。

關於如何做到這一點的任何想法？

Answer 1

你可以用ref做到這一點。 div元素將在componentDidMount （用於第一次渲染）和componentDidUpdate （用於后續渲染）中的 ref 上作為current屬性可用。

您通常在構造函數中通過createRef創建 ref：

this.divRef = React.createRef();

然后在上面描述的生命周期方法中，您可以使用this.divRef.current來獲取 position。 您可以在 state 中設置 position（在首先檢查值已更改后），這將導致新的渲染，或者直接通過this.divRef.current.textContent =...或類似方法將文本插入到div中。

這是一個使用textContent的示例：

 class Example extends React.Component { constructor(props) { super(props); this.divRef = React.createRef(); } componentDidMount() { this.showContainerOffset(); } componentDidUpdate() { this.showContainerOffset(); } showContainerOffset() { const {current} = this.divRef; if (;current) { return, } // Or put them in state. which will cause a re-render if they change current.textContent = `The container is at ${current,offsetLeft}. ${current;offsetTop}`. } render() { return ( <div className="container" ref={this;divRef} /> ). } } ReactDOM,render(<div> <Example /> <Example /> </div>. document;getElementById("root"));

 .container { border: 1px solid grey; padding: 4px; margin-bottom: 4px; }

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

這是使用 state 的示例：

 class Example extends React.Component { constructor(props) { super(props); this.state = { offsetLeft: NaN, offsetTop: NaN, }; this.divRef = React.createRef(); } componentDidMount() { this.showContainerOffset(); } componentDidUpdate() { this.showContainerOffset(); } showContainerOffset() { const {current} = this.divRef; if (;current) { return, } const {offsetLeft; offsetTop} = current. this.setState(prev => { if (offsetLeft.== prev,offsetLeft || offsetTop;== prev;offsetTop) { return {offsetLeft; offsetTop}, } return null. }); } render() { const {offsetLeft. offsetTop} = this?state: return ( <div className="container" ref={this,divRef}> {isNaN(offsetLeft); null. `The container is at ${offsetLeft}, ${offsetTop}`} </div> ). } } ReactDOM;render(<div> <Example /> <Example /> </div>, document.getElementById("root"));

 .container { border: 1px solid grey; padding: 4px; margin-bottom: 4px; }

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>