React: Warning: Function components不能提供ref。访问此引用的尝试将失败。您的意思是使用React.forwardRef()吗？
是的，当在函数组件中使用ref时，会出现这个警告。这是因为函数组件本身是无状态的，无法直接提供ref。要解决这个问题，可以使用React.forwardRef()函数。
React.forwardRef()是一个高阶函数，它接受一个函数组件作为参数，并返回一个新的组件，该组件可以接受ref作为props。通过使用React.forwardRef()，我们可以将ref传递给内部的子组件。
下面是一个示例代码：
const MyComponent = React.forwardRef((props, ref) => {
// 使用ref
return <input ref={ref} />;
});
// 使用MyComponent
const App = () => {
const inputRef = React.useRef(null);
React.useEffect(() => {
inputRef.current.focus();
}, []);
return <MyComponent ref={inputRef} />;
};在上面的示例中，我们创建了一个名为MyComponent的函数组件，并使用React.forwardRef()将ref传递给内部的input元素。然后，在App组件中，我们创建了一个ref，并将其传递给MyComponent。
这样，我们就可以在函数组件中使用ref，并且不会再收到"Function components不能提供ref"的警告。
React.forwardRef()的优势在于它提供了一种在函数组件中使用ref的方式，使得我们可以更方便地操作DOM元素或其他需要引用的组件。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云云函数（SCF）、腾讯云云数据库MySQL版（CDB）、腾讯云对象存储（COS）等。
更多关于React.forwardRef()的信息，请参考腾讯云文档：React.forwardRef()
相关·内容
我正在努力实现“反应-交叉-观察者”，我无法为我的生活找到一个解决方案。
详细信息：
我有一个简单的演示网站，我想做的反应，所以我也可以学习。目前，该网站只有主页和主页到目前为止有这些部分:标题，约，投资组合和联系形式。
我想做的是简单地在每个部分(关于，投资组合和联系表单)添加一个类，一旦该部分在视图中。使用jquery的那种事情将在2分钟内结束。
我已经安装了“反应性-交叉-观察者”，到目前为止，我的homepage.component.jsx中的代码如下所示：
import React from 'react';
import Header from "../..
浏览 5提问于2022-06-16得票数 2
1回答
我想用自定义的参考文献动态地创建组件，我想使用这些参考资料，并使用一些功能，比如测量()等。
我创建了以下代码
var elems = [];
const CarousalLoop = (props) => {
var links = [
{ name: 'america' },
{ name: 'canada' },
{ name: 'norway' },
{ name: 'bahamas' }
];
links.forEach((val, index) =
浏览 3提问于2021-06-15得票数 1
回答已采纳
在尝试通过input (或任何其他非样式组件，例如SwitchUnstyled、SelectUnstyled等)自定义该组件时，我会收到警告
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `ForwardRef`.
InputElement@http://localhost:3000/main.4c2d885b9953394bb
浏览 4提问于2022-09-01得票数 0
更新:下面的实现没有任何问题。该错误是由于react-redux升级造成的，因为redux现在依赖于功能组件而不是类组件。 import React, { forwardRef } from 'react'
const DivWithRef = forwardRef((props, ref) => {
return(
<div ref={ref} {...props}>
{props.children}
</div>
)
}) class AClassComponent extends Component {
浏览 54提问于2019-05-21得票数 1
回答已采纳
2回答
我正在尝试使用库在todo应用程序中拖放列表，但是我一直在控制台中得到这三个错误。
错误1：
Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `Droppable`.
错误2：
Function components cannot be given refs. Attempts to access this ref will fail. Did y
浏览 8提问于2021-07-13得票数 2
回答已采纳
我使用refs来访问子组件。
<MyComponent
ref='_my_refs'
...
/>
打电话给他们
this.refs._my_refs.scrollToTop();
我得到下面的错误
警告:不能给函数组件参考。访问此引用的尝试将失败。您是想使用React.forwardRef()吗？
浏览 0提问于2020-01-28得票数 5
回答已采纳
问题是：
我试图使用jest和React.ForwardRef来模拟包装在React.ForwardRef()中的功能组件，但是我一直收到这样的警告(这是我的测试失败了)：
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
下面是我想测试的组件：
const ParentComponent = () => {
const childRef = useRef(null);
浏览 58提问于2022-04-18得票数 7
我有一些代码，比如：
import { GoogleMap } from 'react-google-maps';
const GoogleMapContainer = () => {
const zoomToBounds = React.useCallback(
(map): void => map && bounds && map.fitBounds(bounds),
[bounds]
);
<GoogleMap ref={zoomToBounds}>
浏览 1提问于2020-05-09得票数 2
我有这个父类组件
class TransferHolder extends Component {
constructor(props) {
super(props);
this.transfer = React.createRef();
}
render() {
return (
<div>
<h1>HELLO !</h1>
<Transfer ref={this.transfer}/&g
浏览 3提问于2020-10-07得票数 0
我有两个组成部分。父母和孩子。
在父组件中，我有一个按钮。如果用户单击该按钮，我希望对子组件中的另一个按钮执行ScrollIntoView。
我想我想要定义对childs按钮a的引用，这样我就可以在父按钮onClick中执行如下操作：
ref.scrollIntoView({block: 'end', behavior: 'smooth'});
它将滚动到子组件中的按钮。
下面是一个很小的例子：
ParentComponent.jsx
import React, {useRef} from 'react';
import ChildCompone
浏览 1提问于2019-12-02得票数 6
回答已采纳
1回答
我正在运行React 16.8，我有一个需要测量高度的函数组件(这样我就可以知道在垂直空间中显示多少个孩子)，看起来最好的方法是使用refs，但是到目前为止我尝试的所有东西都会得到相同的警告：Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?。
我尝试了以下在线示例来使用.forwardRef，但我肯定没有正确设置它。感谢您的帮助。
相关代码如下：
import React, { useS
浏览 5提问于2020-02-11得票数 3
我目前正在运行React 16.8.6和样式组件4.3.2，在尝试使用React.forwardRef时遇到了一个问题。
在Comments.js中
import CommentItem from './CommentItem';
class Comments extends Component {
constructor(props) {
super(props);
this.items = [];
}
componentDidMount() {
console.log(this.items);
}
render() {
浏览 7提问于2020-02-07得票数 1
回答已采纳
1回答
我想将一个引用传递给一个动态加载的组件。当组件用常规导入加载时，一切都按预期工作。在使用动态导入时，ref值是undefined || { current: null }。
我在控制台中得到以下错误消息：
Warning: Function components cannot be given refs.
Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
我曾尝试使用React.forwardRef，但没有成功。
父组件： Recaptcha.tsx
import React from
浏览 4提问于2022-09-28得票数 0
回答已采纳
我正在收到警告Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?。我很困惑，因为我在使用forwardRef().而且起作用了。
我试图将我的自定义输入元素传递给ReactDatePicker。在这个问题上有几个GitHub问题，比如这个。但是，在实现工作的示例时，我无法完成最后一个错误。
以下是自定义的Input元素：
interface InputProps extends Input
浏览 8提问于2019-10-26得票数 7
回答已采纳
此警告不发生在调试或发布模式构建过程中，而是在测试App.js时：
App.js
import React from 'react';
import { View, AppRegistry } from 'react-native';
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
import { LocalizationProvider } from 'library/localization';
import NavigationSe
浏览 4提问于2020-09-06得票数 1
回答已采纳
我试图从父组件获得子组件(类组件)的引用，我面临两个问题：
Parent component
private childRef: RefObject<any> = React.createRef();
<Child ref={this.childRef} />
ref回调在我的引用中不触发并获得空{current: null}。
React-dev-tools警告我不要从函数组件传递引用，但是我的子组件是类组件..
react_devtools_backend.js:2273 Warning: Function components cannot be given
浏览 2提问于2020-08-28得票数 0
我正在开发反应-本土项目。
我已经创建了一个自定义组件，在其中我使用第三方库组件。第三方库组件需要代码中的useRef钩子，这样我就可以控制库组件。
import React, {useRef} from 'react';
...
const MyComponent = () => {
const ref = useRef();
return (
<View>
<Button
title="OPEN 3rd party component&
浏览 2提问于2021-03-10得票数 0
2回答
我正在制作一个简单的简历生成应用程序。
Index.js:
import ReactDOM from "react-dom";
import Resume from "../components/resume";
import React, { useRef } from "react";
import { useReactToPrint } from "react-to-print";
const App = () => {
const componentRef = useRef();
const handleP
浏览 5提问于2020-09-02得票数 3
回答已采纳
我想将OutboundLink组件从插件包装在一个实质性的UI链接组件中。
我在控制台中得到以下错误消息：
index.js:2177 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `ForwardRef`.
in OutboundLink (created by ForwardRef)
in ForwardRe
浏览 2提问于2019-06-12得票数 1
回答已采纳
我试图将多次引用传递给孩子的孩子，但它不起作用。我有一个使用Avatars组件的名为AvatarBuilder的功能组件。此组件呈现Avatar组件的列表。其思想是在AvatarBuilder中拥有对每个Avatar组件的引用。
以下是汇总的代码片段：
const AvatarBuilder = props => {
...
// in this dummy example i would have 5 avatars
const URLS=[1,2,3,4,5];
const refs = URLS.map(item => ({ ref: Reac
浏览 76提问于2020-06-02得票数 0
回答已采纳
我正在使用一个自定义的、转发的复选框，这样我就可以将它作为组件传递给DataGrid。
const CustomCheckbox = ({
checkboxRef,
...props
}: {
checkboxRef: React.ForwardedRef<unknown>;
}) => (
<Checkbox
{...props}
ref={checkboxRef as React.RefObject<HTMLButtonElement>}
sx={{
color: "#363636",
浏览 7提问于2022-07-06得票数 0
回答已采纳
在将React.forwardRef()添加到.JSX组件文件后，我发现了一个错误。
import React from 'react';
import classes from './MyInput.module.css';
const MyInput = React.forwardRef((props, ref)) => {
return (
<input className={classes.myInput} {...props} />
);
};
export default MyInput;
现在我
浏览 3提问于2022-08-30得票数 0
回答已采纳
这是我第一次尝试使用React，并且不完全理解在构建可重用的输入组件时所遇到的错误。TypeScript处理这种组件的方法是什么？
参见组件&下面的错误：
import React, { FC, InputHTMLAttributes } from 'react';
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
name: string;
label: string;
ref: string;
}
const Input: FC<
浏览 22提问于2021-06-09得票数 0
回答已采纳
1回答
嗨，我有下面的代码。我想使用样式组件库在我自己的资料ui按钮上设置样式：
import React from 'react';
import styled from 'styled-components'
import { Button as MuiButton } from '@material-ui/core';
interface SimpleProps<T extends string> {
random?: T;
}
interface Props {
children: React.ReactNode;
浏览 3提问于2020-01-27得票数 0
4回答
所以我不确定传球裁判是否是最好的选择，但这是我要做的，告诉我是否有更好的选择。
所以我想要一个导航链接的onClick，向下滚动到div "contactForm“。
App.js
import ContactForm from './components/ContactForm'
import ParllaxPage from './components/ParllaxPage'
import NavigationBar from './components/NavigationBar'
import React from 'r
浏览 2提问于2020-08-17得票数 3
回答已采纳
我是个新手，我正在尝试集成GSAP来使用refs动画子组件。在我将元素分离成不同的组件之前，尝试和动画的过程运行得很好！
React没有错误代码，但我得到了以下控制台错误：
警告:不能为函数组件提供引用。访问此引用的尝试将失败。您的意思是使用React.forwardRef()吗？
我已经研究了上面提到的forwardRef，但不确定它是否适合我试图实现的目标。
/**
* Parent Component
*/
import React, { Component } from 'react';
import Spirit from './Spirit';
浏览 0提问于2019-08-28得票数 1
我正在构建一个带有包控件的React网站。下面你可以找到一个简单的文本+按钮的例子。我的场景是在按下按钮时访问文本控件。我需要像document.findElementById这样的东西，通过工作。它对于组件控件(扩展React.Component)非常有效，但对于北极星组件失败，并显示以下错误：
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
根据警告详细信息和文本控件定义，它看起来
浏览 34提问于2021-06-07得票数 1
2回答
具有保持状态的容器组件。它呈现了许多无状态组件。
我想访问它们的所有DOM节点，这样我就可以按需调用。
我正在尝试ref方法，因为它是。
我得到了以下错误：Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.
避免此错误的推荐方法是什么？最好没有额外的dom元素包装器，比如exra div。以下是我的现行守则：
容器组件-负责呈现无状态组件。
import React, { Component } from 'react';
impo
浏览 1提问于2017-12-10得票数 6
回答已采纳
1回答
按照示例，我有一个自定义输入组件：
Input.tsx
import React from "react";
export default function Input({label, name, onChange, onBlur, ref}:any) {
return (
<>
<label htmlFor={name}>{label}</label>
<input
name={name}
placeholder="Jane&#
浏览 2提问于2022-08-29得票数 1
回答已采纳
我升级到Matri-UV4.0.1，我看到Modals现在需要一个转发引用。我在使用类组件和对话框实现修复程序时遇到了一些问题。
我尝试在几个地方使用React.createRef()和React.forwardRef((props, ref) => (...)，但是我想不出如何解决这个警告。
在父组件中，我呈现自定义组件。
<ApolloFormDialog />
在ApolloFormDialog中，我基本上呈现：
<Dialog ...>
{title}
{subtitle}
{form}
</Dialog>
完整的警告是Warni
浏览 0提问于2019-05-28得票数 20
回答已采纳
1回答
我正在使用Next.js的最新版本来制作我的博客网站，不知道为什么显示错误，当我试图制作我的表单时，然后显示我的错误，就像这样： Warning: Function components cannot be given refs.
Attempts to access this ref will fail. Did you mean to use React.forwardRef()? ? 我在下面的代码中尝试过： import React, { useState } from "react";
import { APP_NAME } from "../
浏览 114提问于2021-03-01得票数 2
回答已采纳
我正在尝试实现来自的自定义切换下拉示例，在类型记录中使用。
以下是我的组件代码：
import React from 'react';
import Dropdown from 'react-bootstrap/Dropdown';
import FormControl from 'react-bootstrap/FormControl';
export const DropdownSelector =() => (
<Dropdown>
<Dropdown.
浏览 0提问于2020-09-15得票数 10
回答已采纳
在使用时，我得到了一个错误
// [ts] Property 'forwardRef' does not exist on type 'typeof React'.
const MyComponent = React.forwardRef((props: Props, ref: any) => ...
在React本机中，父组件抛出此错误：
Invariant Violation: Element type is invalid: expected a string (for build-in components) or a class/function
浏览 0提问于2018-05-10得票数 8
回答已采纳
我肯定我解释错了，但我试图传递一个对div的引用，这个div可能存在，也可能不存在，并在同级组件中读取该引用。
让我解释一下，(最后是完整的测试代码)：
我定义了一个接受Overlay属性的React.MutableRefObject<HTMLDivElement | null>组件。然后，它将返回的样式组件设置为这个ref。虽然这很棘手，因为只有当有项目要显示时，我才返回样式的div：
return (
overlayItems.length > 0
? (
<StyledOverlay ref={ref}>
浏览 0提问于2022-01-04得票数 1
我试图使用forwardRef & useImperativeHandle从父组件触发两个函数。我的密码在下面。我不知道我在哪里出错，但是我的代码无法用下面的错误进行编译。有人能告诉我吗？我想我已经定义了编译器所抱怨的这两个函数。我的语法有错吗？
const SimpleBackdrop = React.forwardRef((props, ref) => {
const [open, setOpen] = React.useState(false);
React.useImperativeHandle(ref, () => ({
handleClose
浏览 8提问于2022-08-21得票数 1
回答已采纳
下面是我代码中的一些片段。我有一个函数组件，定义为：
function AssociationViewer(props) {
const core = React.useRef<GraphCore | null>(null);
const dataService = React.useRef<DataService>(new DataService(props.graphApi));
const selectionBoxDimensions = React.useRef(null);
const initialGraphRender =
浏览 8提问于2022-05-24得票数 0
我有一个带有保存按钮的组件
<Button onClick={() => requestSaveAsync()}>Save</Button>
我还需要能够从应用程序的顶级调用requestSaveAsync，因此我在一个名为useEditRow的自定义钩子中添加了一个useImperativeHandle钩子
interface Props {
ref: MutableRefObject<{
addItem: () => void
}>
}
const useEditRow = (props: Props) =&
浏览 6提问于2021-09-20得票数 3
好吧，我已经读过每一个关于这个的帖子和Github的问题，但是找不到一个真正的答案来解释为什么我们不能在打字本上console.log(ref.current)这个。
function App() {
const ref = React.useRef<HTMLDivElement>(null);
return (
<div className="App">
<Parent ref={ref} />
</div>
);
}
export default App;
const Paren
浏览 5提问于2022-05-07得票数 0
回答已采纳
我试图导出一个反应，但得到这个TS错误，我无法解决。
以下是组件：
import React, {
useEffect,
MutableRefObject,
forwardRef,
RefObject
} from 'react';
import styled from 'styled-components';
export interface TextareaInputProps
extends React.HTMLAttributes<HTMLTextAreaElement> {
text?: string;
onC
浏览 0提问于2020-09-01得票数 2
回答已采纳
MUI文档声明，如果您想要使用MuiLink作为组件，但使用Reactive路由器的路由功能，则应该将其作为添加到主题中。
建议的例子：
import * as React from 'react'
import type { LinkProps as RouterLinkProps } from 'react-router-dom'
import { Link as RouterLink } from 'react-router-dom'
import type { Components } from '@mui/material/st
浏览 10提问于2022-06-28得票数 0
对不起，如果我的问题不清楚，这是我的第一个问题。
我读了许多分解和github问题，但我找不到任何答案。
代码正在工作，但我在控制台中有一个exeption，exeption是关于我提供给<Tab/>的<Tab/>道具。
资料-UI:提供给ButtonBase的component支柱无效。请确保子组件在此自定义组件中呈现。
我有这个组件
import React, { useState } from 'react'
import MenuCategory from './MenuCategory'
import Tabs from &#
浏览 2提问于2020-12-23得票数 2
1回答
我正在使用创建一个虚拟列表。默认情况下，React将其列表呈现为带有<div>元素的<div>。我希望使用<ul>元素呈现一个<li>，并添加如下样式：
const Item = React.forwardRef<HTMLLIElement, { children: React.ReactNode }>(
(props, ref) => {
return (
<li className="border-r border-neutral-20" {...props} ref={ref}
浏览 17提问于2022-10-13得票数 0
回答已采纳
3回答
这里有一个带有按钮的父组件和一个具有显示警报功能的子组件。
但我搞错了，
Function components cannot be given refs. Attempts to access this ref will fail.
代码：
import { useRef } from "react"
const ChildComp = () => {
function showAlert() {
alert("Hello from Child Component")
}
return <div></div>
浏览 6提问于2022-03-23得票数 -2
回答已采纳
在useRef变量中不能设置为输入元素
const inputRef = React.useRef<HTMLInputElement>(null);
<Input name="answer" ref={inputRef}/>
在<Input ref="">上，我得到以下错误
有没有办法解决这个问题。提前感谢
我的完整代码：
浏览 27提问于2020-05-25得票数 0
回答已采纳
父组件(我删除了一些相关代码)：
import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react
import InputItem from 'src/components/InputItem'
let tokenRef = useRef(null)
return (
<InputItem
ref={tokenRef}
placeHolder="xxxx"
/>
浏览 2提问于2020-05-11得票数 1
回答已采纳
我正在构建一个仪表板，它将包含一堆项目，如果用户通过单击图标进入“编辑模式”，则可以单独编辑这些项目。当用户处于此模式时，如果他们在当前正在编辑的项目之外单击，应用程序会给他们一个弹出窗口，所以我开始尝试实现类似于的东西。但我这里的问题是，仪表板中的项将由一个数组和一个map函数动态生成。所以我想给这些项目动态分配ref。我只使用了无状态功能组件和样式化组件。
我试着调整的解决方案来使用新的useRef钩子，然而，现在我的实现中，每一项的ref.current都是undefined，加上我在控制台中得到了一个Warning: Function components cannot be give
浏览 4提问于2019-07-18得票数 0
回答已采纳
我目前在我的React应用程序中收到了以下错误：
功能组件不能给出参考文献。访问此引用的尝试将失败。您是想使用React.forwardRef()吗？
如何使用forwardRef()解决这个问题？
我的代码如下：
const Services: FunctionComponent = (): ReactElement => {
const servicesRef = useRef(null);
return (
<Layout>
<ServicesList ref={servicesRef} />
</Layo
浏览 4提问于2021-03-16得票数 42
1回答
该模型在hashRouter in App.js下呈现。当其状态isOpen为真时，将显示该模态。
当我试图用redux显示一个Modal时，我就得到了这个错误。
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `TrapFocus`.
in ConnectFunction (at Modal.js:41)
in
浏览 1提问于2019-07-18得票数 6
回答已采纳
错误：
键入“{子类:字符串；严重性:字符串；sx：{宽度:字符串；}；}”不能分配到键入“IntrinsicAttributes&RefAttributes”。属性‘子属性’在'IntrinsicAttributes & RefAttributes‘类型中不存在。
警报组件
const Alert = React.forwardRef(function Alert(props, ref) {
const ref_var = useRef<HTMLDivElement>(null);
return <MuiAlert elevation={6}
浏览 6提问于2022-03-13得票数 1
回答已采纳
1回答
我有App.tsx，它包含两个同级组件：
Konva.tsx：它有CanvasOptions.tsx：它有一个下载画布按钮
因此，我创建了一个名为ref的stageRef in App.tsx，将其传递给Konva.tsx & Options.tsx。我使用React.forwardRef将参考文献转发给子组件。
App.tsx
import * as React from 'react'
import type { Stage as StageType } from 'konva/types/Stage'
import { Konva, Option
浏览 2提问于2020-12-28得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
