在react中使用useRef时CSSStyleDeclaration未提供任何值
在React中使用useRef时，CSSStyleDeclaration未提供任何值可能是由于以下几个原因导致的：
- 未正确引入CSS样式：CSS样式可能未正确引入到React组件中。确保在组件的顶部正确导入CSS文件或内联样式。
- 组件渲染顺序问题：使用useRef时，需要确保组件已经完成了DOM的渲染，否则CSSStyleDeclaration可能无法获取到正确的值。可以尝试在useEffect钩子中使用useRef，以确保DOM已经渲染完成。
- 元素未正确挂载：CSSStyleDeclaration是用于获取元素的计算样式的对象，因此需要确保在使用useRef时，元素已经成功挂载到DOM中。可以使用ref属性将元素绑定到useRef创建的引用。
在解决该问题之前，需要先确认以上原因是否存在，并进行相应的调整。此外，React本身并不直接提供用于获取CSSStyleDeclaration值的API，需要借助原生JavaScript方法进行操作。
在腾讯云的相关产品中，可以考虑使用云函数（SCF）来执行一些与DOM操作相关的逻辑。云函数是一种无服务器的计算服务，可以在腾讯云的服务器上执行代码，无需关心底层的服务器运维。
通过使用云函数，可以在React组件中调用API来获取CSSStyleDeclaration的值。可以使用腾讯云的云函数产品SCF（Serverless Cloud Function），通过编写相应的业务逻辑代码来实现获取CSSStyleDeclaration的值，并将其返回给前端。
使用云函数的优势是可以充分利用腾讯云的计算资源，无需自行搭建服务器，节省了开发、部署和维护的成本。此外，云函数还具备高可用性、弹性扩缩容等特点，可以根据实际需求进行配置。
腾讯云云函数SCF产品介绍链接地址：https://cloud.tencent.com/product/scf
需要注意的是，以上仅提供了一种解决方案，具体实现方式还需要根据具体场景和需求进行调整。
相关·内容
我有点糊涂了！如果我们在useRef中传递或不传递null作为初始参数，有什么区别吗？就像我们在React的功能组件中创建状态一样，我们传递null作为第一个值，然后更新它！如果我们在useRef中也传递空，比如
const = useRef()；
或
const = useRef(null)；
两者都是对的？
浏览 1提问于2021-06-10得票数 1
回答已采纳
我在父组件const portfolioRef = React.useRef(null)中有一个React.useRef，并且希望使用子组件const parent = portfolioRef.current中的当前版本。但是当我以这种方式使用它时，它会显示cannot read property of current。有谁知道怎么解决这个问题吗？
export function Portfolio() {
const portfolioRef = React.useRef(null)
return (
<div className={cx(styles.compon
浏览 0提问于2020-06-23得票数 0
在我的应用程序组件中，我有：
function App() {
const appRef = useRef();
return (
<div
ref={appRef}
className="app position-relative overflow-hidden"
dir="rtl"
>
<NavBar cssCalsses="py-14 px-20 px-lg-0" />
<Switch>
<
浏览 1提问于2021-03-04得票数 0
回答已采纳
我正在尝试理解React中的useRef钩子。 我在react中创建了一个简单的时间。其代码如下所示。 import { useRef, useState, useEffect } from 'react';
function Parent() {
const [count,setCount]=useState(5);
const ref=useRef(0);
//let hold=0;
const countdown=()=>{
ref.current=setInterval(()=>{
// console.log(&
浏览 64提问于2021-07-14得票数 1
在React中，使用类，我可以在组件加载时将焦点设置为输入，如下所示：
class Foo extends React.Component {
txt1 = null;
componentDidMount() {
this.txt1.focus();
}
render() {
return (
<input type="text"
ref={e => this.txt1 = e}/>
);
}
}
我正在尝试使用新
浏览 1提问于2018-11-07得票数 17
回答已采纳
我正在尝试使用react-native-snap-carousel实现垂直轮播，我想要的是一个垂直轮播，根据react-native-snap- carousel itemHeight文档的content.As，它具有不同的轮播高度，而当涉及到垂直轮播时，sliderHeight是必需的。有没有可以根据内容大小来实现itemHeight的？？
浏览 9提问于2020-05-28得票数 0
我正在学习如何使用“useRef”钩子来响应本机函数。在检查我在Internet上找到的一些代码时.我看到了包括问号("?")在内的用法，如(如代码中所指出的)：
import React, { useEffect, useRef, useState } from 'react';
import {
Button,
Dimensions,
StyleSheet,
View,
} from 'react-native';
import { SignalingChannel } from './SignalingChannel
浏览 9提问于2022-03-12得票数 0
回答已采纳
通过查看钩子、文档和一些博客，我们了解到在使用useRef()时，我们存储了一个可变的值。
您可能很熟悉refs，主要是作为访问DOM的一种方式。如果您传递要与ref对象交互的ref对象，React将在该节点发生更改时将其.current属性设置为相应的DOM节点。
但是，useRef()比ref属性更有用。在类中保持与使用实例字段类似的任何可变值是很方便的。
这是因为useRef()创建了一个普通的JavaScript对象。useRef()和自己创建{current：.}对象的唯一区别是，useRef将在每次呈现时给出相同的ref对象。
这与仅使用let声明和使用变量相比有什么好处
浏览 2提问于2020-03-05得票数 9
回答已采纳
代码是使用React功能组件编写的。 单击parent中的按钮后，应该会触发函数showAlert。这就是要求。当前在父组件中childRef.current无法调用showAlert()函数。我得到一个打字错误 Property 'showAlert' does not exist on type 'ForwardRefExoticComponent>' 上级功能组件编码 import React, { forwardRef, useRef, useImperativeHandle } from 'react';
import Chil
浏览 78提问于2021-02-25得票数 0
回答已采纳
4回答
当用户输入一些值时，我有一个被更改的输入元素：
const[elem, setElem]=useState("");
const handleChangeElem = (event) => {
setElem(event.value);
...
<Input onChange={handleChangeElem}/>
}
因此，例如，当用户编写“test1”时，elem状态应该是‘test1 1’。但是问题是，在我写了一个字母之后，整个组件重新呈现，并且输入是空的。elem状态在其他任何地方都没有提到(使用效果或类似的效果)，所以我不知道为什么它会
浏览 18提问于2022-04-20得票数 1
在寻找避免在输入字段每次更改后呈现组件的方法时，我遇到了一个建议，即使用useRef而不是onChange事件进行状态更新。在简单的组件中，这似乎是可以的，但由于我是初学者，我不知道这在更复杂的应用程序中是一个很好的方法。壳牌，我继续这种方式，还是我应该坚持onChange事件？为了解决这个难题，我进行了大量的探索，但没有找到明确的答案。这方面的任何建议都将受到更多的欢迎。
这是它在组件中的样子：
import React, { useRef, useState } from 'react';
import axios from 'axios';
const
浏览 4提问于2021-02-11得票数 1
回答已采纳
当一个模态引用打开时，当我试图访问它时，我有问题。
下面是我的包装类。
ModalWrapper
import * as React from 'react';
import MyModal from './MyModal'
import * as ReactDOM from "react-dom";
export interface IModalWrapperProps {
}
export class ModalWrapper extends React.PureComponent<IModalWrapperProps, {}>
浏览 2提问于2017-11-24得票数 2
我有一个下拉菜单在我的react js中，我想要的是当我点击任何列表项时，我想让它关闭，或者即使我点击它以外的任何地方，下拉菜单也应该自动关闭(然后在点击ofcoss时再次打开)。
下面是我的代码
import React from "react";
import { useState, useEffect } from "react";
const TripTypeDropdown = (props) => {
const [values, setValues] = useState([
{ tripType: "One Way&#
浏览 2提问于2021-06-18得票数 0
我正在用React和Typescript做一个Datepicker，但是我似乎不能用useRef和引用的.current属性来克服错误。我正在尝试获取我为其分配引用的div，以便在文档被单击时关闭它。 我就是不太明白我做错了什么。下面是我的代码： function Datepicker({label, placeholder}: DatepickerProps){
const [open, setOpen] = React.useState(false)
const [day, setDay] = React.useState(0)
const [month, setMonth]
浏览 893提问于2020-10-24得票数 12
回答已采纳
根据标题，如果我要执行下面的代码片段，因为React.useRef将在每个呈现上被调用，那么是否有必要在调用document.createElement("div")时进行清理，还是浏览器垃圾会收集下一个呈现时创建的div？
我知道，如果我实际上要用div附加document.body.appendChild，那么我需要清理实际被追加的元素……我只是想知道在调用React.useRef之后存储在内存中的div。
function Modal() {
const portalRef = React.useRef(document.createElement("div&
浏览 0提问于2022-03-11得票数 0
回答已采纳
4回答
我正在用react和react-leaflet制作地图。React Leaflet有一个名为FeatureGroup的类，我希望在第一次呈现时使用React中的useRef钩子访问它，然后访问useEffect函数中的值。但是，在初始渲染时，引用是未定义的(markerRef.current返回null)。只有在我对代码进行任何类型的更改后，保存并重新加载React应用程序，它才会获得值
你能告诉我我做错了什么吗?我怎样才能使markerRef.current在初始渲染时不为空？
请在下面找到组件的缩写代码：
import {useRef} from 'react';
im
浏览 3提问于2021-01-29得票数 2
2回答
我正在尝试在离子反应应用程序中实现下面的url代码，允许用户在画布上签名。
错误
类型'{}‘上不存在D:/wamp/www/demos/ionictest/myApp/src/pages/Tab3.tsx(14,39)：属性“”中的 TypeScript错误。TS2339
12 sigCanvas = useRef({})；13区> 14区const清除= () => sigCanvas.current.clear ()；区^ 15区16区康斯特省=() => 17区
我的代码
import { IonContent, IonHeader, IonPage, I
浏览 5提问于2021-02-13得票数 1
1回答
一时兴起..。
我写下了以下代码
import React, { useRef } from 'react';
import { useHistory } from 'react-router-dom';
// Parent component
const Example: React.FC = () => {
// Case A:
const packHistoryToRef = useRef<ReturnType<typeof useHistory>>(useHistory());
// Case B:
co
浏览 3提问于2021-11-08得票数 1
回答已采纳
我在React中做了一个项目，我想做的是在开始按钮上开始1000的阶乘计算，并在取消按钮点击时取消计算。因此，我使用的setInterval是完整的代码： import React, { useState } from "react";
const Button = ({ title, countButton }) => {
const [result, setResult] = useState(0);
let interval;
const handleFactorial = (num) => {
let iteration = 1;
浏览 10提问于2020-08-19得票数 0
1回答
我有一个自定义的React，它监视特定元素外部的单击。它工作得很好，但是我在一些地方很难让TypeScript开心。
App.js
import { useRef, useCallback } from "react";
import useClick from "./useClick";
export default function App() {
const asideRef = useRef(null);
const handleStuff = useCallback(() => {
console.log("a cli
浏览 3提问于2021-10-24得票数 0
回答已采纳
2回答
我想知道在ES6或Babel中是否有一个速记来声明具有相同值的多个变量，例如，当在React中使用多个ref时： const a = React.useRef();
const b = React.useRef();
const c = React.useRef();
const d = React.useRef();
.... 但在vanilla JS中，当声明一个具有多个键值为null的对象时也是如此： const obj = { a: null, b:null, c:null, d:null } 所以我想也许有像这样的东西 const a, b, c, d, = React.useRe
浏览 31提问于2020-07-21得票数 1
参考：
我的目标是防止当用户拖动地图时重新渲染，同时也更改市场坐标。当前的解决方案是使用useState挂钩。但它会导致组件重新渲染，从而导致应用程序延迟。
我尝试使用let variable，但它不能移动marker。
tl:dr Screen.js
import React from 'react';
import {StyleSheet, View} from 'react-native';
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';
const
浏览 2提问于2020-09-26得票数 0
3回答
假设我使用useEffect在初始渲染时预取数据：
function myComponent(props) {
const { fetchSomething } = props;
...
...
useEffect(() => {
fetchSomething();
}, []);
...
...
}
我的林特警告我"React Hook useCallback has missing dependencies“。它希望我将fetchSomething放在依赖数组中。
问题是，即使它的fetchSomethi
浏览 2提问于2019-06-02得票数 2
我正在使用mobx-react /mobx-react来进行国家管理。
使用类，我可以定义一个不可观察的idToDelete来存储单击的项目id，使用可观察的打开一个Modal，当用户单击" delete“时，我知道要删除的项目。id被重新呈现的组件“记住”。
class Greeting extends React.Component {
idToDelete = null;
confirmDelete = id => {
this.idToDelete = id;
openConfirm = true;
浏览 0提问于2019-06-13得票数 2
回答已采纳
我是一个反应新手(30h学习)和一些基本的Javascript背景。现在我正在用一门课程学习，并试图“离开”这条路。但我很好奇如何才能实现我的预期目标。
在呈现开始时，有一个Memegenerator从API中获取所有模因的图像。这是解决了一个使用效果-钩。现在，我希望函数getMemeImage()在API调用开始时运行一次，状态被更新(这不是课程的一部分，但我还是想试一试)。
但它给了我一个错误：“无法对未挂载的组件执行反应状态更新”。
虽然我的研究发现，像didMount(tbh，我不理解)等东西并不是主要使用钩子的“现代”方式，您只需使用第二个useEffect。但不幸的是这对我不起作
浏览 2提问于2022-05-07得票数 2
回答已采纳
今天使用react可能会有点令人困惑。回到类组件的时代，在文档中是非常清楚的。
我们应该主要针对DOM元素使用refs：
但是今天我们有钩子和功能组件。我们正在使用useRef钩子。
同时，这也给我们带来了新的模式。使用ref来包含回调，或者我们希望保留的任何数据(某种状态)，但不需要重新添加。它是一个强大的API，并且还显示在文档中：
因此，现在参考文献可用于：
存储可变数据
回忆录
但这些医生自相矛盾。并在开发团队中造成许多错误和冲突。
医生说了两件不同的事，这是个问题。
那么，在这种情况下，“正确”的做法是什么呢？
const MyComponent = (props
浏览 6提问于2020-05-20得票数 7
回答已采纳
1回答
我在react中创建自己的自动完成组件时遇到了一个问题。我创建了一个组件来渲染结果并在它们的包装器上设置最大高度，我在input元素上使用了一个onKeyDown事件来跟踪按键。现在我用它来标记活动的项目...但是当我设置的max-height太小，并且当"active-item“超出div的高度限制时，侧边会有一个滚动，滚动不会随之下降……我怎么才能修复它？
import React, { useState, useEffect } from "react"
const Autocomplete = ({ options }) => {
const [
浏览 0提问于2019-12-06得票数 0
1回答
我有一个MainFooter组件，其中包含页脚和迷你播放器，这是动画的全面视图时，点击。我有一个问题，每当我们点击一个页脚标签，球员最大化，然后被卡在那里，没有反应。
另外，当单击播放机内的向下箭头图标时，不会最小化它，也不会单击MiniPlayer使其最大化，但是我们可以通过单击它并将其拖到全屏视图来最大化MiniPlayer，对于最大化的播放器也是如此。
下面是MainFooter组件：
export const MainFooter = ({ setCounter, counter }: Props) => {
const translationY = new Value(0)
浏览 2提问于2021-03-24得票数 5
回答已采纳
1回答
在我的react组件中，有以下两个初始值
const [initialValues, setInitialValues] = useState({
name: 'Tom',
age: 85,
});
我有一个文本字段来更改name字段的值。我有一个更改年龄字段的按钮。
如果我键入name as 'Jerry‘并按下按钮更新年龄，它会将age更新为75，并再次将名称'Jerry’重置为'Tom‘。
在文本框中键入Jerry并单击按钮，以查看它是否变为"Tom“
我该如何解决这个问题？
任何帮助！提前感谢！=)
浏览 2提问于2020-12-28得票数 0
当我将ref传递给一个传递给flatList组件的renderItem元素时，总是会出现错误，这里我想要的是用ref操作项目本身，但我总是得到这个错误 ? 下面是我的代码片段 import React, { useState, useRef, useEffect } from 'react';
import { View, Text, FlatList, Button } from 'react-native';
import Animated, { Transitioning, Transition } from 'react-native-
浏览 39提问于2020-01-22得票数 0
这是否会产生任何意外的副作用，是否偏离了最佳做法？
var ref = React.useRef(new Obj()).current
// Code using ref
浏览 9提问于2022-10-25得票数 2
回答已采纳
我试图在我的react函数组件中使用useRef，但是当我试图访问它时，我得到了错误"TypeError: Cannot read property 'onMonthSelect‘of undefined when using "useRef“”。
这是下面的代码
import React, { useRef, useState, useEffect } from "react";
import moment from "moment";
import "react-dates/initialize";
import &#
浏览 6提问于2021-06-03得票数 1
回答已采纳
在中，我有：<Animated.ScrollView ref={cardRef} ... />。
当我在ref上悬停时，我看到了(JSX attribute) React.ClassAttributes<Animated.ScrollView>.ref?: React.LegacyRef<Animated.ScrollView> | undefined，所以我创建了ref，类似于so const cardRef = useRef<React.RefObject<Animated.ScrollView> | undefined>(und
浏览 6提问于2021-04-18得票数 1
回答已采纳
我是React的初学者。我正在尝试构建一个组件来恢复输入的文本，然后将其插入到HTML中。 import React, { useState } from 'react';
function InputGetter(){
const [text, setText] = useState("")
let typed = ""
return(
<div>
<input type='text' onChange = {(e)=> typed =
浏览 14提问于2021-02-05得票数 0
回答已采纳
3回答
目标：
单击该按钮时，从文本框中获取值
问题：
该值不显示在控制台中。
"Uncaught Error: Function components cannot have string refs. We recommend using useRef() instead"
如何在此上下文中应用useRef()？
斯塔克布利茨
信息：
*新手的反应
谢谢!
import React from 'react';
import logo from './logo.svg';
import './App.css';
function Ap
浏览 4提问于2022-01-16得票数 1
回答已采纳
我在反应发展过程中遇到了一个问题……它正在浏览器控制台中显示此错误。这意味着什么？怎么解决呢？.
react.development.js:1545 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
at useRef (react.development.js:1545:1)
at BrowserRouter (utils.js:439:1)
at renderWithHooks (react-dom.development.js:16218:1)
a
浏览 6提问于2022-07-24得票数 -2
1回答
因此，我试图为我的组件实现示例，因为我希望控制内部的滚动条。
我现在拥有的是：
const MessagesFC = React.forwardRef((props, ref) => {
return <Flex
className={"Messages"}
direction={"Column"}
ref={ref}>
{messages}
</Flex>
});
const scrollDivRef = React.createRef
浏览 3提问于2020-05-24得票数 1
回答已采纳
1回答
我在试着理解Ref在React中的用法。我在Ant设计文档中看到了一个示例。
有一行代码我无法理解它是如何工作的。
saveInputRef = input => (this.input = input);
以及使用情况如下：
<Input ref={this.saveInputRef} ...
但是在React文档中，据说您使用React.createRef()方法创建了一个ref。
这是另一种使用它的方式吗？为什么没有React.createRef()方法？
浏览 5提问于2021-09-30得票数 3
1回答
我正在跟踪三位纤维文件的官方反应。我试图将.obj文件加载到我的场景中，使用本文： --麻烦从这里开始：
第1部分: OBJLoader的导入
最佳案例，我认为这个问题可以在这里解决。
我很乐意在这里找到并解决这个错误，因为它以后只会变得更丑。不管怎样，我似乎没办法用下面这句话。请注意，这实际上是从官方文档中粘贴出来的：
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
这一行在VSC中标记为红色，当我悬停在它上面时，我得到以下信息：
'OBJLoader' is decla
浏览 14提问于2022-05-09得票数 0
回答已采纳
当scrollY遇到offsetTop时，我正在制作一个“粘性”标题，但我不想硬编码偏移量。我一直试图存储初始的offsetTop，然后可以在附加到scroll侦听器的isSticky()方法中检查它。
到目前为止，我还无法使值保持不变(没有双关意)，而且它似乎是运行中的方法中的null。
const ProfileHeader: React.FC<ProfileHeaderData> = ({ profile }) => {
const bannerUrl = getBannerImageUrl(profile.id, null, profile.bannerIma
浏览 6提问于2022-07-25得票数 1
回答已采纳
1回答
下面是antd的示例，
我想用重写它
这是我的半成品代码：
import React, { useState, useEffect} from "react"
import { List, TextareaItem } from 'antd-mobile';
import { createForm } from 'rc-form';
function TextareaItemExample {
useEffect(() => {
//this.autoFocusInst.focus();
});
return (
浏览 0提问于2018-12-12得票数 1
回答已采纳
我有一个用例，在这个用例中，我必须将react平板选择器放在input元素的左侧或右侧，而不是放在上面或下面。
在使用flatpickr时，我注意到flatpickr被添加到dom的正文中。相反，我想将它添加到容器div中。因此，我使用容器HTMLElement作为值来传递appendTo选项。但它并没有像预期的那样工作，仍然附加在body标签上。*
下面是我使用的代码片段。
import React, {useState, useRef} from 'react';
import Flatpickr from 'react-flatpickr';
const
浏览 1提问于2020-06-03得票数 1
在我的vue ts项目中，我使用这种方法作为样式。
private styleTableObject: CSSStyleSheet = {
width: '100%',
height: '76%'
}
我被迫选择了any类型。
private styleTableObject: any = {
width: '100%',
height: '76%'
}
错误日志：
Type '{ width: string; height: string;
浏览 4提问于2020-07-24得票数 7
回答已采纳
我们有一个名为ScrollContainer的React组件，当它的内容滚动到底部时，它会调用一个prop函数。
基本上：
componentDidMount() {
const needsToScroll = this.container.clientHeight != this.container.scrollHeight
const { handleUserDidScroll } = this.props
if (needsToScroll) {
this.container.addEventListener('scroll', this.hand
浏览 4提问于2017-12-15得票数 17
我希望能够以编程方式focus()和select()一个react-select。单击下面的Add new brand： ? 应该呈现如下所示的内容： ? 这是我到目前为止所掌握的。 我的Select组件包装在React.forwardRef中 const Select = React.forwardRef((props, ref) => {
return (
<Creatable ref={ref} {...props} />
)
}) 这样我就可以使用styled-components对其进行样式设置，同时仍然可以对其输入使用ref，如下
浏览 25提问于2020-05-03得票数 2
1回答
import { useEffect } from "react";
import { useRef } from "react";
import { useState } from "react";
const Button = () => {
const [counter, setCounter] = useState(0)
const btnRef = useRef();
useEffect(() => {
btnRef.current.addEventListener('
浏览 0提问于2021-07-23得票数 0
我使用的是react-select，我希望在不将其添加到options属性的情况下，在单击按钮时清除选定的值。
我试过了
使用状态操作options属性，但显然在调用clearValue()方法时，默认情况下自动推送到options数组。
问题
如何告诉react-select只清除选定的值，而不将其添加到任意位置的选项数组中？
import React, { useRef } from "react";
import Select from "react-select";
export default function App() {
con
浏览 6提问于2021-02-18得票数 0
回答已采纳
在我使用Formik的React/类型记录应用程序中，我得到了错误。
Object is possibly 'null'. TS2531
125 | <Modal.Footer>
> 126 | <Button variant="primary" type="submit" form="nicknameForm" disabled={!(formRef.current.isValid && formRef.current
浏览 3提问于2021-02-10得票数 2
1回答
我正在尝试将一个外部地图服务嵌入到我的React应用程序中。他们建议将API集成到常规HTML网页中，如下所示： <script type="text/javascript" src="//map.search.ch/api/map.js"></script>
<script type="text/javascript">new SearchChMap({center:[123456,987654],y:"-1m",poigroups:"default"});</scri
浏览 18提问于2020-07-05得票数 1
回答已采纳
建议，为了获得先前的状态，需要进行如下的跟踪：
function Counter() {
const [count, setCount] = useState(0);
const prevCount = usePrevious(count);
return <h1>Now: {count}, before: {prevCount}</h1>;
}
function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
})
浏览 5提问于2021-07-21得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
