在组件didUpdate中，react获取div clientWidth返回null
在组件didUpdate中，当React获取div的clientWidth返回null时，可能有以下几种原因：
- 元素尚未渲染：在组件的生命周期中，didUpdate是在组件更新完成后调用的。如果在组件更新完成之前尝试获取div的clientWidth，可能会返回null。这可能是因为元素尚未渲染完成，或者在渲染过程中发生了错误。
解决方法：确保在获取clientWidth之前，元素已经成功渲染。可以使用ref来引用该div元素，并在ref的回调函数中进行获取clientWidth的操作。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.divRef = React.createRef();
}
componentDidUpdate() {
const divElement = this.divRef.current;
if (divElement) {
const clientWidth = divElement.clientWidth;
// 进行相应的操作
}
}
render() {
return <div ref={this.divRef}>Content</div>;
}
}- 元素不存在或已被移除：如果在didUpdate中尝试获取的div元素不存在或已被移除，那么获取clientWidth也会返回null。
解决方法：确保在获取clientWidth之前，div元素存在且未被移除。可以通过条件判断或其他方式来确保元素的存在性。
class MyComponent extends React.Component {
componentDidUpdate() {
const divElement = document.getElementById("myDiv");
if (divElement) {
const clientWidth = divElement.clientWidth;
// 进行相应的操作
}
}
render() {
return <div id="myDiv">Content</div>;
}
}- CSS样式导致元素不可见：如果div元素的CSS样式导致其不可见（例如display:none），那么获取clientWidth也会返回null。
解决方法：确保在获取clientWidth之前，div元素的CSS样式不会导致其不可见。可以通过修改CSS样式或其他方式来确保元素的可见性。
class MyComponent extends React.Component {
componentDidUpdate() {
const divElement = document.getElementById("myDiv");
if (divElement && divElement.style.display !== "none") {
const clientWidth = divElement.clientWidth;
// 进行相应的操作
}
}
render() {
return <div id="myDiv" style={{ display: "block" }}>Content</div>;
}
}总结：在组件didUpdate中，当React获取div的clientWidth返回null时，可能是因为元素尚未渲染、元素不存在或已被移除、CSS样式导致元素不可见等原因。需要确保在获取clientWidth之前，元素已经成功渲染、存在且未被移除，并且CSS样式不会导致元素不可见。以上是一些常见的解决方法，具体根据实际情况进行调整。
相关·内容
1回答
如何将多个classNames传递给具有情感js的儿童
reactjs、emotion
我想将组件分为baseUI one和styled：
例如：MyComponent.jsx
export default class MyComponent extends React.Component {
...
...
render() {
const { wrapperClassName, className, childClassName } = this.props;
return (
<div className={wrapperClassName>
<div className={className /&g
浏览 0提问于2018-06-13得票数 1
回答已采纳
2回答
如何使用类型记录在功能组件中使用呈现道具
reactjs、typescript
我正在尝试转换我的React应用程序(创建-反应-应用程序)来使用类型记录，并且我遇到了一个使用渲染道具的组件的障碍。
这是一个简化的版本，它仍然存在错误.
import React from 'react'
type Props = {
fullWidth?: boolean,
renderRightSection?: React.ReactNode
}
const Component = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
let {fullW
浏览 8提问于2020-05-13得票数 6
回答已采纳
3回答
反应插入节点对象
javascript、reactjs
如果在中创建这样的DOM node
const divElement = document.createElement("div");
将其注入组件所呈现的内容的最佳方法是什么？
例如
const MyComponent: React.FC<Props> = () => {
const divElement = document.createElement("div");
return (
<div className="my-component">{divElement}</d
浏览 9提问于2019-10-16得票数 5
2回答
组件的重新渲染是否会创建其子组件的新实例？
reactjs
class Clock extends React.Component {
render() {
return (
<div>
<MyComponent/>
</div>
);
}
}
假设此组件重新呈现。它会在每次渲染时创建一个新的MyComponent实例吗？
浏览 5提问于2018-08-05得票数 2
回答已采纳
3回答
如何在反应性js中使用forEach
javascript、html、css、reactjs
我想要创建一个函数，它用同一个类迭代所有元素，并删除一个特定的类。
使用JavaScript可以很容易地做到这一点。
const boxes = document.querySelectorAll(".box1");
function remove_all_active_list() {
boxes.forEach((element) => element.classList.remove('active'));
}
但我怎样才能做类似的事呢？我面临的问题是，我不能使用document.querySelectorAll(".box1"
浏览 3提问于2021-06-30得票数 3
回答已采纳
1回答
如何在呈现后更新状态
reactjs
我有以下内容：
import React from 'react';
import './styles.css';
import ToolTip from '../../Common/components/ToolTip/ToolTip';
export default class RouteTitleTooltipComponent extends React.Component {
constructor(props) {
super(props);
this.titleParagraphRef =
浏览 3提问于2020-11-17得票数 0
回答已采纳
1回答
在实际重新呈现之后，似乎不会调用componentDidUpdate()
javascript、jquery、reactjs
基本代码流如下所示。
item.js
export default class Item extends React.Component {
constructor(props) {
super(props);
this.state = {
modalIsOpen: false,
logs: []
};
this._fetchLogs = this._fetchLogs.bind(this);
this._fetchAnotherLogs = this._
浏览 0提问于2016-12-15得票数 1
1回答
材料设计中的“升级”类是做什么的，它是如何设置的？
material-design-lite
我正在实现材料设计与材料-设计-轻在一个反应应用。当我在我的顶部组件中使用TextField w/浮动标签时，它可以工作。但是在top组件调用的组件上，它没有。TextField w/浮动标签然后充当一个常规的输入字段。
我注意到外部TextField得到一个名为“is- TextField”的类，但是内部TextField没有。
app结构
app.js
products.js
myTest.js (doesn't work)
myTest.js (works)
App.jsx
export default class App extends React.Compon
浏览 1提问于2015-07-10得票数 5
回答已采纳
1回答
古伦堡块:如何从el-函数迁移到JSX元素？
plugins、block-editor
我读过很多教程，没有人使用el()语法，而是使用“标记语法”(JSX?)。以下是我的例子：
这很好，但我认为我必须迁移以使它更容易读懂：
edit: function(props) {
return [
el(
BlockControls, { key: 'controls' },
el( Toolbar, null,
el(
IconButton, {
className: 'components-icon-button components
浏览 0提问于2021-01-06得票数 2
1回答
在一起使用useRef和forwardRef的正确方法是什么？
reactjs、typescript、react-hooks
我有两个组件：App和Child。我使用useRef钩子获取Child组件中的DOM元素，并对其做一些工作。
我还使用ref API将App组件传递给Child组件。
App.tsx
import { useRef } from "react";
import Child from "./Child";
export default function App() {
const ref = useRef(null);
console.log("App ref: ", ref);
return (
<div classN
浏览 6提问于2021-06-28得票数 17
3回答
自动转到在React Virtual Dom中创建的div元素
javascript、reactjs、ecmascript-6
我的网页使用React组件。在其中一个组件的渲染函数中，div元素如下所示：
<div id='myid'>
{/* ... */}
</div>
正被使用。重新加载页面后，我们需要转到其中一个div。例如，在重新加载该页面后，我们可能需要自动转到id等于myid的<div>元素。注意，<div>在React虚拟DOM中，所以像document.getElementById这样的函数可能无法工作(就像我一样)。这个是可能的吗？
浏览 4提问于2018-06-30得票数 1
2回答
如何根据状态有条件地初始化组件？
reactjs
我刚开始用反应。我编写了这个简单的组件：
class DocVerDate extends React.Component {
static propTypes = {
dateTypes: React.PropTypes.array.isRequired
};
constructor(props) {
super(...arguments);
this.state = {
typeSelected: false
};
}
typeChanged = ev =&
浏览 5提问于2015-11-17得票数 0
回答已采纳
1回答
在使用LeafletJS和ReactJS时，Tiles没有正确排序
javascript、reactjs、ecmascript-6、leaflet
我使用LeafletJS插件在ReactJS单页应用程序中显示完整的页面地图。我遵循了的指令。但是，瓷砖没有按正确的顺序显示。他们是随机订购的。我发现了一个类似的问题，，但在这种情况下，订单是固定的页面刷新。对我来说不是这样。我的代码是(不包括样板)：
index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="stylesheets/atlas.css">
</head>
<body>
浏览 3提问于2016-04-09得票数 2
1回答
如何应用MathJax/KaTex来呈现React组件
reactjs、mathjax、react-component、katex、slatejs
我正在使用React & SlateJS制作一个网页编辑器。编辑器内容中有LaTex代码，我希望用户看到呈现的LaTex方程。MathJax和通过将它们加载为CDN，具有自动渲染功能。一旦加载了它们，就会呈现html body上的内容。但当我修改内容时，它们不是实时渲染的。
所以我做了一个按钮来打开一个，在一个较小的窗口中呈现不可编辑的编辑内容，并且我希望在模式中呈现LaTex代码。
APP组件：
import {Editor} from 'slate-react';
import ReactModel from 'react-modal';
impor
浏览 120提问于2019-10-30得票数 3
2回答
在axios调用期间，在挂载时反应未正确加载状态
javascript、reactjs、axios
基本上，我正在制作一个基本的react应用程序，它从数据库中抓取一些数据，而我被困在基本设置上。 我的意图是让我的状态包含来自服务器查询我的数据库的响应。 我的响应是100%工作，并且像预期的那样从axios调用中发送回数据，但是状态永远不会得到更新。 编辑:我正在尝试将电影传递给一个名为MovieList的组件，我也提供了相应的代码。 App.jsx import React from 'react';
import axios from 'axios';
import MovieList from './MovieList.jsx';
浏览 24提问于2020-09-17得票数 4
2回答
当道具更改时进行反应渲染
reactjs、redux、render、react-props
我试图在道具只改变的时候渲染我的组件，不幸的是，即使道具没有改变，它也会继续渲染，我的代码如下：
componentDidUpdate(prevProps,prevState){
if(prevProps.data !== this.props.data){
this.props.getData(userID)
}
}
render(){
//console.log('render') infinite rendering even when this.props.data is unchanged
浏览 0提问于2019-06-28得票数 1
3回答
函数包装器阻止componentDidUpdate？
reactjs
我有一个组件FancySpanComponent：
class FancySpanComponent extends React.Component {
render() {
return (
<span ref={this.props.innerRef} className={this.props.className }>
<div style={{ textAlign: "center" }}>rand: {this.props.randomData}</div&g
浏览 34提问于2021-05-14得票数 0
回答已采纳
4回答
响应setState在componentDidUpdare中导致最大更新深度超过
javascript、reactjs、setstate、react-lifecycle
我得到了
错误:超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中反复调用componentDidUpdate时，就会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
但是，我所读到的应该能够在componentDidMount中调用componentDidMount，而不会出现错误。
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
matchtedProducts:
浏览 3提问于2020-12-10得票数 2
回答已采纳
1回答
反应合成函数与高阶函数用法
javascript、reactjs、react-hooks、jsx、higher-order-functions
我有一个JSX文件MyComponent.jsx定义如下；
import compose from 'compose-function'
const MyComponent = () => {
//some hooks like useState, useEffect here
// finally returns some JSX
return (
<>
</>
)
}
function MyComponentData(props) {
let StyledMyCompo
浏览 2提问于2021-02-23得票数 1
2回答
React子组件属性更新行为不一致？
javascript、reactjs
我正在为React应用程序开发一个加载栏组件。 百分比作为整数传入，但不是过渡地更新0、1、2、3、4等...100，道具正在更新0...然后直接到100。 但这就是事情变得奇怪的地方。 在组件的render()函数中，我输出了带有console.log()的百分比，控制台显示了值的过渡更新(0，1，2，3，等等)。100)，但是通过{percent}渲染它仍然停留在0，然后直接跳到100。 同样观察React开发工具，组件显示它从0跳到100，但渲染中的console.log()遍历所有数字。 下面是组件的代码： const Loader = ({msg, percent = null,
浏览 16提问于2020-09-09得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
