Javascript 使用ReactJS时如何获得div的宽度？

首先，我敢说已经有人问了这个问题（），但我不知道如何在我的项目中使用这个答案

我的问题是：

我有一个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;

import React，{useffect，useState}来自“React”；
导入“./login.css”；
从“firebase”导入*作为firebase；
//pic进口
//...
/pic导入结束
函数登录（）{
const pics_slide_ref=React.createRef（）；
const[width，setWidth]=0；
useffect（（）=>{
如果（图片幻灯片参考当前）{
设置宽度（pics\u幻灯片\u参考当前.getBoundingClientRect（）.width）；
控制台。原木（宽度）；
}
}, [])
var choosenProfile='pic_1'；
函数配置文件选择器（id）{
document.getElementById（choosenProfile.classList.remove（'choosen'）；
选择profile=id；
document.getElementById（choosenProfile.classList.add（'choosen'）；
}
返回(
登录
注册
退出
选择一个个人资料图片
<
profileChoosen（'pic_1'）}/>
profileChoosen（'pic_2'）}/>
profileChoosen（'pic_3'）}/>
profileChoosen（'pic_4'）}/>
profileChoosen（'pic_5'）}/>
profileChoosen（'pic_6'）}/>
profileChoosen（'pic_7'）}/>
profileChoosen（'pic_8'）}/>
profileChoosen（'pic_9'）}/>
profileChoosen（'pic_10'）}/>
>
);
}
导出默认登录；

不幸的是，它不起作用。有没有一个简单的方法来获得宽度？

---

如果没有，有人能详细解释一下怎么做吗？

您可以使用

ref

和

getBoundingClientRect（）

来获取任何元素的宽度

在构造函数中定义一个

ref

：

this.myRef = React.createRef()

然后，将其连接到组件

<YourComponent ref={this.myref} />

---

您可以使用

ref

和

getBoundingClientRect（）

获取任何元素的宽度

在构造函数中定义一个

ref

：

this.myRef = React.createRef()

然后，将其连接到组件

<YourComponent ref={this.myref} />

---

实际上，您需要将

ref

分配给div。将

ref

与

useState（）

和

useffect（）

结合使用。我们集成了

useffect（）

，因为它在组件的第一次渲染之后运行，从而确保div和ref是有效的

然后我们得到div的宽度并将其存储在

状态中

，以便您可以在标记中使用它

import React, {useEffect, useState} from 'react';

function SquareHolder() {
    const [width, setWidth] = useState(0)
    const square_ref = React.createRef();

    useEffect(() => {
       if(square_ref.current){
          setWidth(square_ref.current.getBoundingClientRect().width)
       }
    }, [])


    return (
        <div className="square" ref={square_ref}>
            The width is: {width}
        </div>
    );
}

export default SquareHolder;

import React，{useffect，useState}来自“React”；
函数平方持有者（）{
const[width，setWidth]=useState（0）
常量square_ref=React.createRef（）；
useffect（（）=>{
if（平方参考电流）{
setWidth（方形参考当前.getBoundingClientRect（）.width）
}
}, [])
返回(
宽度为：{width}
);
}
出口违约责任人；

---

请参阅工作沙盒：

您实际上需要将

ref

分配给div。将

ref

与

useState（）

和

useffect（）结合使用。我们集成了
useffect（）
，因为它在组件的第一次渲染之后运行，从而确保div和ref是有效的

然后我们得到div的宽度并将其存储在
状态中
，以便您可以在标记中使用它

import React, {useEffect, useState} from 'react';

function SquareHolder() {
    const [width, setWidth] = useState(0)
    const square_ref = React.createRef();

    useEffect(() => {
       if(square_ref.current){
          setWidth(square_ref.current.getBoundingClientRect().width)
       }
    }, [])


    return (
        <div className="square" ref={square_ref}>
            The width is: {width}
        </div>
    );
}

export default SquareHolder;

import React，{useffect，useState}来自“React”；
函数平方持有者（）{
const[width，setWidth]=useState（0）
常量square_ref=React.createRef（）；
useffect（（）=>{
if（平方参考电流）{
setWidth（方形参考当前.getBoundingClientRect（）.width）
}
}, [])
返回(
宽度为：{width}
);
}
出口违约责任人；

请参阅working sandbox:
您能提供更多代码吗？我应该发布什么部分？您的react组件具有正方形。请查看react-ref和ref回调：Hi@BudaÖrs请参阅下面使用working codesandbox的我的解决方案。让我知道这是否有帮助：）你能提供更多的代码我应该发布什么部分？你的react组件有正方形。看看react ref和ref回调：Hi@BudaÖrs使用工作代码沙盒查看我下面的解决方案。如果有帮助，请告诉我：）我试过了……：））I get:TypeError:无法读取nullComponent的属性“getBoundingClientRect”，在调用它之前应该先装入该属性。从何处调用函数？例如，尝试从
componentDidMount
调用@布达Örs@BudaÖrs将
ref
连接到您的组件。请看我答案中的第二步：）我很高兴能帮上忙@布达奥斯（我试试…：）I get:TypeError:无法读取nullComponent的属性“getBoundingClientRect”，在调用它之前应该先装入该属性。从何处调用函数？例如，尝试从
componentDidMount
调用@布达Örs@BudaÖrs将
ref
连接到您的组件。请看我答案中的第二步：）我很高兴能帮上忙@BudaÖrsI试过了，我得到了：TypeError:arr[Symbol.iterator]不是一个函数：（@BudaÖrs在你发布的代码中没有引用arr[]）：（@BudaÖrs需要给我们更多的上下文。我也不知道我有一个arr[]：（@BudaÖrs我的错，问题在这里。只需使用这行
const[width，setWidth]=useState（0）
；我的原始代码中缺少了useState（）调用。太好了：）。我很高兴这对您有所帮助。@BudaÖrsI尝试了一下，我得到了：TypeError:arr[Symbol.iterator]不是函数：（@BudaÖrs在您发布的代码中没有任何引用arr[]的内容。（@BudaÖ需要给我们更多的上下文。我也不知道我有一个arr[]：（@BudaÖrs我的错，问题就在这里。