React，如何在更新DOM后立即获取元素的大小
React是一个用于构建用户界面的JavaScript库。它通过使用虚拟DOM（Virtual DOM）的概念，实现了高效的页面更新和渲染。在React中，当组件的状态或属性发生变化时，React会自动更新DOM以反映这些变化。
要在更新DOM后立即获取元素的大小，可以使用React的生命周期方法和ref属性。
- 使用生命周期方法：
- 在组件挂载完成后，可以使用
componentDidMount生命周期方法来获取元素的大小。在这个方法中，可以通过document.getElementById或document.querySelector等方法获取元素，并使用offsetWidth和offsetHeight属性来获取元素的宽度和高度。 - 示例代码：
- 示例代码：
- 在组件挂载完成后，可以使用
- 使用ref属性：
- 在组件中，可以使用ref属性来引用DOM元素。通过在元素上设置ref属性，并在组件中创建ref对象，可以在组件中访问到该元素。
- 示例代码：
- 示例代码：
以上是在React中获取元素大小的两种常用方法。根据具体的场景和需求，选择适合的方法来获取元素的大小。对于更复杂的元素操作，可以结合使用React的其他功能和第三方库来实现。
相关·内容
2回答
嗨，我是Reactjs的新手。我正在使用fineuploader将文件上传到服务器。我希望创建一个FineUploader组件，以便我可以在任何时候使用它。
package.json
{
"name": "Sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \
浏览 1提问于2016-05-04得票数 3
回答已采纳
我使用react创建了一个类似于twitter的对话框。我查看了react文档，发现了几个组件生命周期，但不确定应该使用哪一个来提高代码性能：componentDidMount或componentWillMount
当我在文本框中键入内容时，会在控制台中看到打印文本框值的更新。谁能告诉我在这种情况下应该使用哪种方法以及在什么时候使用？
class TwitterBox extends React.Component {
constructor(props) {
super(props);
this.state = { enteredTextBoxvalue : '
浏览 0提问于2017-05-29得票数 0
我有一个小测验，每个问题在div中使用AJAX重新加载，而不是刷新整个页面。
我有一个变量quizScore，它保存用户的分数。
在最后一个按钮上，页面questionendQuiz.php被加载到我的quizWrapper中。
我想把分数输出到一个叫做scoreout的span中
<span id="scoreOut"></span>
我试过用getElementById
document.getElementById("scoreout").value = quizScore;
问题是，这不能在通过AJAX加载页面时运行。因此，我尝试
浏览 2提问于2014-03-14得票数 0
回答已采纳
1回答
ref属性使我们能够捕获不受控制组件的值。
class MyComponent extends Component {
render() {
<input type="text" ref={el => this.setState({ myEl: el })}/>
}
}
这是怎么回事？据推测，input实际上是一个React组件，它有一个属性("prop") ref，它在每次调用componentDidMount时都会使用字段的包装器组件调用回调。
浏览 3提问于2017-06-23得票数 2
回答已采纳
3回答
我有一个父React组件，它包含一个子React组件。
<div>
<div>Child</div>
</div>
我需要对子组件应用样式，以便在其父组件中定位它，但它的位置取决于父组件的大小。
render() {
const styles = {
position: 'absolute',
top: top(), // computed based on child and parent's height
left: left() // computed based on ch
浏览 0提问于2016-01-08得票数 29
回答已采纳
我很难理解如何在React ()中传递组件实例变量。我的等级如下：
DataView
|> SharedScale
|> Graph1
|> Graph2
|> ...
其思想是在中创建一个共享的、D3轴/缩放的，并通过DataView包装器将其传递给所有其他图(即，引用标度应该显示在页面的顶部)。例如，在调整组件的大小时(例如，在我的示例中是在render函数中创建的)，比例实现可能会发生变化：
class SharedScale extends React.Component {
render() {
// Create a D3 s
浏览 0提问于2019-01-10得票数 2
回答已采纳
我有一个类似这样的小组件(下面的代码被简化为所需的部分)，在更新状态时，它的行为非常奇怪。
class Componenent extends React.Component {
constructor(props) {
super(props);
this.state = {showStuff: false};
}
render() {
return(
//Markup
{this.state.showStuff && (
<button onClick={() => this.
浏览 0提问于2018-07-10得票数 1
回答已采纳
2回答
我知道我的功能正在运行，但无论出于什么原因，我都不能设置这个属性"isLoggedIn“的状态
在基于登录检测的componentDidMount() i setState中，它似乎不起作用。
import React, {
Component
} from 'react';
import { AppRegistry, View, StyleSheet, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';
import Fi
浏览 5提问于2016-12-24得票数 0
回答已采纳
1回答
我有一组选择菜单，当我使用重置按钮重置它们时，我需要找出它们的值。
问题是，这只适用于选项的change事件，而且我不能让它在第一次单击的重置按钮上工作，因为它没有检测到更改。
这里的代码示例：
import React from 'react';
import { useState } from 'react';
import uuid from 'react-uuid';
export default function Select() {
const [value, setValue] = useState({
select1
浏览 7提问于2022-01-12得票数 0
回答已采纳
4回答
正如所说：
更新发生后立即调用componentDidUpdate()
但我注意到，即使浏览器DOM元素没有更新，也会调用componentDidUpdate()。
那么，React文档更新发生意味着什么？
浏览 1提问于2018-11-12得票数 5
回答已采纳
在下面的代码中，为什么console.log的循环在任何HTML元素显示之前就结束了？我已经把JavaScript代码放在了文件的末尾。
<!DOCTYPE html>
<html lang="en">
<body>
<p id="counter"> no clicks yet </p>
<script>
for (i = 0; i < 99999; ++i) {
console.log(i);
}
浏览 0提问于2018-09-28得票数 5
如果您在浏览器中打开此代码并查看“元素”选项卡下的developer tools，您将看到在单击按钮后，元素将被添加到DOM中，但不会呈现。
反应如何？使用的是什么浏览器机制或API以及如何使用？
另外，如果从console.log(元素)中删除“useLaoutEffect (元素)”，则组件不会立即出现在DOM树中的“元素”选项卡中。为什么会发生这种情况？
const sleep = (duration) => {
const start = new Date().getTime();
let end = start;
while(end < start +
浏览 8提问于2022-06-13得票数 1
回答已采纳
假设我在第1行修改了HTML DOM，我可以确定JavaScript的第2行将使用由第1行执行的DOM修改吗？
这是我在表单上遇到的一些错误行为的唯一解释。前一行应该更新DOM，但有时DOM在不在下一行时没有更新。不过，当我放慢速度时，事情似乎运行得很好。
浏览 0提问于2011-07-27得票数 0
回答已采纳
我在React和react-hooks中使用简单的待办事项应用程序有问题。
当我获取inputValue并尝试将其分配给object并保存到我的items数组中时，它不起作用。
( onSubmit操作后的第一个赋值操作是空数组，我完全不知道为什么。但是第二个按钮的动作可以正常工作。
有没有人能帮帮我？
浏览 19提问于2019-07-18得票数 0
回答已采纳
请告诉我，如何正确地解决以下问题？我有一个组件，上面有一个控件，当我点击它时，setState就会被触发。我需要调用函数this.setScrollLeft ()，在这个函数中，我设置了选定的节点(ref)，在本例中是分裂位置。下面是我的实现，但我相信有更好的解决方案： import React from 'react';
import { ScoreCell, getScoreTheme } from 'components/scores';
class LeaderboardPlayerResult extends React.Component {
浏览 68提问于2019-06-29得票数 2
回答已采纳
你好，谢谢你阅读这个问题！
我已经学习了几个星期，我很难理解refs如何获得React的实例并将其放入JS变量中。
例如，我们可以讨论文档的示例：
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.focusTextInput = this.focusTextInput.bind(this);
}
focusTextInput() {
// Explicitly focus the text input using the raw
浏览 1提问于2018-02-18得票数 1
回答已采纳
浏览器DOM元素是我们在屏幕上看到的东西，反作用元素也是如此。他们都可以上课。据我所知，唯一的区别是浏览器DOM元素由Browser DOM处理，React元素由React处理。尽管有一些句法上的差异。除此之外，是什么使React元素不同于浏览器DOM元素呢？
浏览 6提问于2022-08-29得票数 1
1回答
我正试图在我的React应用程序中使用Rellax，一个JS视差库。
我已经通过npm下载了Rellax，并将Rellax导入到了React组件中。然后rellax的文档需要为新的Rellax构造函数分配一个Rellax变量，该构造函数以查询选择器作为参数。
就像这样：
var rellax = new Rellax('.rellax');
但是，当我调用组件时，我会收到以下错误：
Error: The elements you're trying to select don't exist.
但是，我确实在组件本身中使用了这个类。
以下是全部内容：
impo
浏览 1提问于2018-02-07得票数 2
回答已采纳
我试图将合并到现有的grails/react项目中。
更新代码：
index.js
ReactDOM.render((
<Router history = {browserHistory}>
<Route path="/" component={CreateAccount}/>
<Route path="/menu" component={Menus}/>
<Route path="/discover" component={DiscoverApp
浏览 1提问于2017-02-25得票数 3
回答已采纳
2回答
我对ref和条件呈现有问题。当我点击一个按钮标签时，我想聚焦一个输入标签。基本上，我有这个简化的代码。
class App extends React.Component {
textInput
constructor(props) {
super(props)
this.state = {isEditing: false}
this.textInput = React.createRef()
}
onClick = () => {
this.setState({isEditing: !this.state.isEditing
浏览 1提问于2018-06-23得票数 11
回答已采纳
在以下经典函数中，DOM/Javascript流中有些东西我不理解，它动态地构建脚本DOM元素，以便在这个注入的脚本中为JSONP请求提供服务：
function requestServerCall(url) { //Construct the script tag at Runtime
var head = document.head;
var script = document.createElement("script");
script.setAttribute("src", url);
head.appendChild(
浏览 4提问于2016-02-10得票数 1
回答已采纳
2回答
我有一个画布，它在ref中使用canvas.getContext( "2d“)。我的问题是，当页面重新呈现，bc状态发生变化时，我会得到一个错误，并决定如何修复它。
这是一个最小的代码示例，其中出现了错误：
import React, { useState } from "react";
import { render } from "react-dom";
const Test: React.FC<{}> = () => {
const [ counter, setCounter ] = useState<number
浏览 4提问于2021-05-25得票数 0
回答已采纳
我有一个类需要得到DOM元素的大小。它运行良好，但当我调整窗口大小时，它才会更新，直到我更改应用程序中的状态，从而迫使改进机。我尝试过将this.forceUpdate添加到componentDidMount()中的'resize'事件侦听器中，但是它没有工作。也许我做错了什么？理想情况下，我希望避免使用this.forceUpdate来实现性能方面的影响。有这方面的工作吗？提前感谢！
我的代码：
class MyComponent extends React.Component {
state = { x: 0, y: 0 }
refCallback = (elem
浏览 2提问于2020-02-14得票数 5
回答已采纳
在下面的示例中，this.refs.foo.clientWidth返回undefined，我不知道原因。如何获得SomeComp在PageComp中的引用以使用其宽度？(使用React 15.2.1或类似的方法)
class PageComp extends React.Component {
componentDidMount() {
console.log(this.refs.foo.clientWidth);
}
render() {
return (
<div>
<p>{this.props.n
浏览 3提问于2016-07-21得票数 3
回答已采纳
1回答
我有表格和动作图标‘删除’，例如：
单击图标后，在我的Redux操作中，我得到TR并添加类'adm-pre-removed‘
import * as types from '../constant/domain.const.js';
export function deleteDomain(event){
return (dispatch, getState) => {
(async () => {
let domainIdElement = event.target.closest('tr&#
浏览 4提问于2017-12-10得票数 0
编辑是因为我原来的问题措辞不对。
我试图理解为什么使用ReactDOM来呈现某些HTML，而其他呈现则是在ReactDOM中完成的。这里有什么东西我遗漏了吗？
我最近学习的一个React课程中的一个例子，这是其中一个使用react dom的练习中的代码：
import React, {Component} from 'react'
import {render} from 'react-dom'
var Bookstore = [
{"title":"Mr. Bean", "author":"Rowa
浏览 0提问于2019-08-28得票数 2
回答已采纳
2回答
我有4个标签和一个列表，以给他们的标题。我想访问每个选项卡的标题，但我只能访问整个HTMLcollection。使用反应。
import React from 'react';
import {Component} from 'react';
class tabs extends Component {
render() {
return (
<div className={"tabs"}>
<ul>
浏览 0提问于2018-03-19得票数 1
回答已采纳
我们使用React组件包装组件库，但在某些情况下，库操作DOM树的方式是，在试图删除React组件时，React将崩溃。
下面是一个复制问题的示例：
function Sample ()
{
let [shouldRender, setShouldRender] = React.useState(true);
return (
<React.Fragment>
<button onClick={() => setShouldRender(!shouldRender)}>show/hide</button>
{
浏览 6提问于2021-09-20得票数 1
回答已采纳
这个照片传送带作品fine.It每5秒更换一次照片。我的问题是，setInterval(this.nextGP, 5000);如何在不调用` componentDidMount‘的情况下调用自己？以下是：
componentDidMount: function () {
this.interval = setInterval(this.nextGP, 5000);
},
在javascript中:在另一个函数中调用的函数在我们调用外部函数之前不会调用。
function outer(){
anotherFunction();
};
浏览 4提问于2016-11-24得票数 1
我有一个动画，动画中的一个元素在ng-重复左或右取决于哪个按钮被点击。
在一次操作中，我设置一个ng类(动画类)，然后删除元素，这会触发动画，但在应用动画之前，它似乎无法识别ng类的更改，除非我使用了$scope.$apply()，但这会引发一个$apply already in progress错误。有没有一种不用使用$scope.$apply()或消除该错误的方法？
这是工作中的小提琴(有错误)。
<div ng-controller="MyCtrl" style="text-align: center">
<div ng-repeat=
浏览 1提问于2014-02-09得票数 4
回答已采纳
我只想将项目的一部分更改为React
有没有什么方法可以让我使用React如此灵活？
浏览 1提问于2017-10-27得票数 0
2回答
假设我想要动态呈现React组件，并获得真正的DOM元素以供将来使用
例如，如果我有一个组件：
function Card({symbol,id,color}){
return <my-card symbol={} id={} color={color}></my-card>
}
我如何渲染它并获得元素？
也许就像这样
const cardElement = React.render(<Card symbol='4' id=111 color='♥'/>)
我需要真正的元素来玩它。做一些测量。然后删除它。
但我认为，
浏览 0提问于2019-01-18得票数 1
2回答
我想在离子模式下设置40%的视图高度。实际上，我希望我的代码可以在所有屏幕分辨率上运行，所以为什么我给出的视图高度以% .But为单位，当我给出40%来查看它时，会占用很小的空间.But，当我给出200%时，它会占用更多的空间.Why，它不会占用给定空间的40%。
我就是这么用的
.a {
height:200% !important;
border :1px solid red;
padding-top:1%;
}
当我给出高度: 40%时，它占用了很小的空间，为什么.It应该占用40%的屏幕分辨率。这是我的代码吗？
浏览 0提问于2015-05-29得票数 1
这是一个在线示例
const Parent = styled.div`
display: flex;
width: 100%;
background: yellow;
justify-content: space-between;
`;
const Children = styled.div`
display: flex;
background: tomato;
height: 50px;
flex: 0 0 10%;
`;
function App() {
return (
<Parent>
<Children /
浏览 32提问于2019-07-17得票数 1
回答已采纳
1回答
我不明白为什么状态没有随着React中的这个reducer函数的设置而改变。我只想从reducer函数中控制台记录新的状态？ const [lessonState, dispatchLesson] = useReducer(lessonReducer, {
lesson: 0,
isComplete: false,
});
const lessonReducer = (state, action) => {
if (action.type === "UPDATE") {
return { lesson: action.lesson, i
浏览 23提问于2021-11-09得票数 0
回答已采纳
组件的数量取决于数组的数量，因此当我向数组中添加新项时，它应该创建新的组件。
当创建新组件时，我希望获得有关它的引用，这就是我有一个误解的地方。当我尝试获取组件时，最后添加的组件是undefined。
但是，如果过了一段时间我想得到它的参考资料，它就会起作用。我想是因为异步，但我不确定。
为什么会发生这种情况，如果有办法避免使用setTimeout
<div id="app">
<button @click="addNewComp">add new component</button>
<new-comp
浏览 2提问于2018-04-26得票数 12
回答已采纳
就像标题里说的。我想要创建一个React组件，这样我就可以通过拖动来调整宽度-就像windows操作系统中的窗口一样。处理这个问题的最佳方法实际上是什么？
编辑
我把我目前处理这一问题的方法包括在内：
首先，我在容器的右上角放置了一个"dragger“元素。当我按下该元素上的鼠标时，我希望创建一个mousemove事件侦听器，它将修改光标相对于容器边缘的初始X位置的X坐标的containerWidth。我已经让事件侦听器在按住鼠标按钮后向我发送并记录坐标，但不幸的是，由于某种原因，事件在鼠标未按下(mouseUp事件)后没有被移除，这不是我想要的。任何值得赞赏的建议，也是那些关于一些问
浏览 2提问于2020-03-21得票数 1
回答已采纳
1回答
import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
const [minus, setMinus] = useState(1);
const ref = useRef(null);
const handleClick = () => {
setMinus(minus - 1);
};
cons
浏览 2提问于2022-02-17得票数 1
回答已采纳
5回答
我已经读过10篇关于React和Virtual的文章。
我知道虚拟DOM使用的是差分算法，并且只更新更改后的UI。但是，我仍然不明白为什么这比更新实际的DOM更快。
以下是一个例子：
<div id="test">
Hello React!
</div>
假设我们创建了一个组件，并使用React对其进行了更改。假设我们将文本更改为Hello World!
我可以使用普通的JS做同样的事情，对吗？document.getElementById('test').innerHTML = Hello World!
我的问题是：
为什么反应
浏览 2提问于2018-03-22得票数 2
我有下面的代码，它是一个react组件，呈现一个巨大的组件。只要这个庞大的组件还没有完成渲染，就会显示一个加载指示器。
import * as React from "react";
import ReactDOM from "react-dom";
import {HUGEComponent} from "./huge.tsx";
class App extends React.Component<{}, {loading: boolean}> {
constructor(props: {}) {
super(pro
浏览 5提问于2019-03-10得票数 0
回答已采纳
我的react应用程序有很多输入字段，其中大多数都是由状态控制的。
每次重新设置输入值时，都会导致页面重新呈现，这可能会减慢应用程序的速度(如果我错了，请纠正我)。
因此，我不希望每次输入更改时都对重置状态作出反应；相反，在用户停止输入后几秒钟就更改状态。
所以我用setTimeout创建了一个setTimeout
const LagTextField = ({ delay, onChange, value, ...props }) => {
const [state, setState] = useState({
localValue: "",
ti
浏览 3提问于2021-01-20得票数 0
回答已采纳
我有一个关于在React.js中加载组件的问题。
是否有方法以特定顺序加载组件。例如，我有我的单一网页网站的每一页的组件。
我希望<homepage />和它的图像首先加载比<profile />，然后<works />，等等.
这个想法是，当用户第一次访问我的站点时，主页会立即加载(或者非常快)，其他的页面也可以跟着加载，所以至少用户在开始滚动之前有一些东西要看。
我尝试谷歌谷歌“加载组件与react.js的顺序”，但没有运气。
class MainContent extends React.Component {
componentDidMount
浏览 3提问于2017-08-24得票数 4
回答已采纳
Extjs
我在Ext.Panel中有一个ifram，而面板在Ext.Window中。
如何在iframe内容更改时使窗口自动变高
请参考代码：
var filePanel = new Ext.Panel({
autoHeight: true
});
var fileUploadWindow = new Ext.Window({
modal: true,
autoHeight: true,
title: 'File Upload',
closable: true,
draggable: true,
autoDestro
浏览 1提问于2012-12-06得票数 1
回答已采纳
背景
我没有太多的反应经验。我正在使用React和Redux编写一个可嵌入的小部件。这个小部件可以在同一个网页上包含多次，每个小部件都有自己的设置。
问题
我只想包括一次反应应用JS。因此，如果小部件在单个页面上多次被包含，它将第一次加载应用程序JS，那么对于每个后续的include，它都会检查JS是否已经包含，如果已经包含，如果没有。
到目前为止，我只能初始化第一个小部件实例，这是在加载了React应用程序JS时发生的。我想，我想为每个后续小部件发出一个轻量级(普通的JavaScript)调用，这些小部件将一个具有该小部件设置的React组件呈现给DOM。
我似乎不知道如何执行普通的Java
浏览 5提问于2016-10-27得票数 0
回答已采纳
在使用useRef和useEffect反应js时，我得到了这个错误。**我如何在React中清除useEffect --这是所有问题的主要主题** Dropdown.js:9
Uncaught TypeError: Cannot read properties of null (reading 'contains')
at HTMLDocument.bodydroptoggler (Dropdown.js:9)
这是截图：
当我点击名为“下拉切换器”的按钮时，我会收到这个错误。
这是app.js的代码
import React, { useState } from
浏览 14提问于2021-12-23得票数 1
回答已采纳
1回答
我遇到了一个奇怪的问题，希望能在这里得到帮助。我学习了的例子，不知道到底发生了什么。警告不应该出现对吧？
组件：Hello.tsx
import React, { useEffect, useState } from "react"
export default () => {
const [loaded, setLoaded] = useState("false")
useEffect(() => {
async function load() {
await Promise.resolve()
setL
浏览 8提问于2022-04-01得票数 2
回答已采纳
2回答
所以我使用一个API来获取一个对象数组，每个对象都有很多数据，我想过滤这些数据来获取我需要的数据，这样我就可以在React-Table上显示它了。
export default class Table extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
fetchData() {
const string = 'http://localhost:8000/issues/assigned/mike';
fetch(string
浏览 0提问于2018-05-04得票数 0
2回答
我有骨干控制，我想重用在新的模块，将写在React和Redux中。我非常不确定如何处理这个问题。我最初的想法是将这个主干视图封装在一个react组件中。与我在示例项目中所做的类似：
import React from 'react'
import ReactDOM from 'react-dom';
import Backbone from 'backbone';
var Test = Backbone.View.extend({
render: function () {
this.$el.html("<p>
浏览 2提问于2017-04-03得票数 3
回答已采纳
4回答
反应状态没有得到更新
、、、、
在这里，我需要在控制台中获得更新的输入状态，但是我得到一个错误，当输入中有什么内容时，setSavedinput是不定义的。
import "./styles.css";
import React, { useState } from "react";
import ReactDOM from "react-dom";
const blankinput = () => {
const [savedContent, setsavedContent] = useState("");
};
const onChangeHa
浏览 6提问于2021-09-05得票数 0
回答已采纳
2回答
引用这篇()文章
简单的回答是DOM并不慢。添加和删除DOM节点是几个指针交换，只不过是在JS对象上设置一个属性而已。
DOM瓶颈仅仅是那些导致重绘的东西吗？如果是这样的话，那么不应该将React的虚拟DOM的呈现与重绘整个组件的性能(当然是在一个浏览器API调用中)进行摊销吗？我认为浏览器执行的算法只会尝试将差异从一种状态重画到另一种状态(比如git？)。这意味着浏览器自己维护一个虚拟DOM。那么，拥有虚拟DOM又有什么意义呢？
另外，添加一个将display样式属性设置为none的元素是否会严重影响性能？我会亲自分析一下这一点，但我不知道该在哪里转，因为我最近才开始编写javasc
浏览 3提问于2016-05-11得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
