javascript - 使用 ReactJS 时如何获取 div 的宽度？

Question

首先，我确定有人已经问过这个问题 ( this )，但我不知道如何在我的项目中使用答案。

我的问题:

我有一个 ID 为 square 的 div。我想获取这个元素的宽度，这是我的代码:

import React, { useEffect, useState } from 'react';
import './login.css';
import * as firebase from 'firebase';

//pic imports
//...
/pic imports end

function Login() {
  const pics_slide_ref = React.createRef();

  const [width, setWidth] = 0;

  useEffect(() => {
    if (pics_slide_ref.current) {
      setWidth(pics_slide_ref.current.getBoundingClientRect().width);
      console.log(width);
    }
  }, [])



  var choosenProfile = 'pic_1';
  function profileChoosen(id) {
    document.getElementById(choosenProfile).classList.remove('choosen');
    choosenProfile = id;
    document.getElementById(choosenProfile).classList.add('choosen');
  }

  return (
    <div className="login">
      <div className="login-container">
        <input placeholder="Your Email..." />
        <input placeholder="Your Username..." />
        <input placeholder="Your password..." />
        <div className="loged-out">
          <button className="sign-in">Sign in</button>
          <button className="sign-up">Sign up</button>
        </div>
        <div className="loged-in">
          <button className="sign-out">Sign out</button>
        </div>


      </div>

      <div className="pic-container">
        <div className="pic-choos">
          <span>Choose a profile pic</span>
        </div>
        <div className="pics">
          <div className="pics-compact">
            <span>&#60;</span>
            <div ref={pics_slide_ref} id="pics-slide-space" className="pics-slide-space">
              <div id="pics-slide-1" className="pics-slide-1">
                <img src={pic_1} alt="#" id="pic_1" onClick={() => profileChoosen('pic_1')} />
                <img src={pic_2} alt="#" id="pic_2" onClick={() => profileChoosen('pic_2')} />
                <img src={pic_3} alt="#" id="pic_3" onClick={() => profileChoosen('pic_3')} />
                <img src={pic_4} alt="#" id="pic_4" onClick={() => profileChoosen('pic_4')} />
                <img src={pic_5} alt="#" id="pic_5" onClick={() => profileChoosen('pic_5')} />
                <img src={pic_6} alt="#" id="pic_6" onClick={() => profileChoosen('pic_6')} />
                <img src={pic_7} alt="#" id="pic_7" onClick={() => profileChoosen('pic_7')} />
                <img src={pic_8} alt="#" id="pic_8" onClick={() => profileChoosen('pic_8')} />
                <img src={pic_9} alt="#" id="pic_9" onClick={() => profileChoosen('pic_9')} />
                <img src={pic_10} alt="#" id="pic_10" onClick={() => profileChoosen('pic_10')} />

              </div>
            </div>
            <span>&#62;</span>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Login;

不幸的是，它不起作用。有没有简单的方法来获取宽度？如果没有人可以详细解释我该怎么做吗？

Answer 1

您可以使用 ref 和 getBoundingClientRect() 获取任何元素的宽度。

在构造函数中定义一个 ref:

this.myRef = React.createRef()

然后，将其附加到您的组件。

<YourComponent ref={this.myref} />

然后，像这样调用 getBoundingClientRect():

myref.current.getBoundingClientRect().width