React Js错误:无法为函数组件提供引用。访问此引用的尝试将失败。您的意思是使用React.forwardRef()吗？
是的，当您在函数组件中尝试访问引用时，React会抛出该错误。这是因为函数组件默认是无法接收引用的，但是您可以使用React.forwardRef()来解决这个问题。
React.forwardRef()是一个高阶函数，它允许您将引用传递给函数组件。通过使用forwardRef()，您可以将引用作为第二个参数传递给函数组件，并将其传递给组件的子组件。
下面是使用React.forwardRef()的示例代码：
import React, { forwardRef } from 'react';
const MyComponent = forwardRef((props, ref) => {
// 在这里使用ref
return <div ref={ref}>Hello World</div>;
});
// 使用MyComponent
const App = () => {
const myRef = React.createRef();
return <MyComponent ref={myRef} />;
};在上面的示例中，我们使用forwardRef()将引用传递给了MyComponent函数组件。然后，在组件内部，我们可以通过将ref属性设置为组件的DOM元素来使用该引用。
React.forwardRef()的优势在于它使得在函数组件中使用引用变得更加灵活和方便。它可以用于许多场景，例如处理焦点、滚动、动画等需要直接访问DOM元素的情况。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云云数据库MySQL版、腾讯云对象存储（COS）。
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
相关·内容
我在分配对div的引用时遇到了问题。我想滚动到此引用的div，但.current的值始终为空/未定义。 import React, { Component, useRef, useEffect } from 'react';
import { Route, BrowserRouter, Redirect } from 'react-router-dom';
class App extends Component {
myRef = React.createRef();
componentDidMount() {
{ this.myRe
浏览 85提问于2020-10-11得票数 0
假设我有一个具有可滚动子组件的组件，我想公开滚动的功能：
const MyComponent = (props) => {
return <ScrollView ... />
}
我想要能做到
<MyComponent ref={myRef} />
...
myRef.scrollTo({x: 0});
所以我需要一种方法将裁判转发到<ScrollView>。让我们试着把裁判放在道具上：
const MyComponent = (props) => {
return <ScrollView ref={props.scro
浏览 2提问于2020-07-16得票数 33
回答已采纳
这是我的代码：
import Card from 'react-bootstrap/Card';
import Collapse from 'react-bootstrap/Collapse';
import React from 'react';
import MuteButton from './buttons/muteButton/MuteButton';
import PInPButton from "./buttons/pInPButton/PInPButton";
import Utility fro
浏览 4提问于2020-08-11得票数 1
1回答
我有一个返回按钮的组件：
const Button = props => <button ref={?} style={{ color: props.color }}>bt</button>;
我正在努力理解HOCs和refForwarding。这是一个临时的组成部分：
const colorer = Button => {
const ButtontWithRef = React.forwardRef((props, ref) => {
return <Button {...props} ref={ref} />;
})
浏览 2提问于2020-05-07得票数 1
回答已采纳
我正在尝试让我的组件接受一个引用。
我有一个这样的组件：
const MyComponent: RefForwardingComponent<HTMLDivElement, IMyComponentProps> = (props, ref) => {
return <div ref={ref}>Hoopla</div>
}
但是当我试图传递一个ref到时是这样的：
<MyComponent ref={myRef}></MyComponent>
..。我得到了这个错误：
Property 'ref' doe
浏览 6提问于2019-11-22得票数 7
我希望能够专注于我用withRouter包装的组件。然而，当我给组件一个ref时，我得到了一个关于将ref分配给一个无状态组件的警告。我假设这是因为引用被附加到withRouter HOC，而不是我的组件，因为它是有状态的。我的一般设置如下所示：
// InnerComponent.js
class InnerComponent extends Component {
constructor(props) {
super(props);
}
}
export default withRouter(InnerComponent);
// App.js
class
浏览 1提问于2018-08-30得票数 10
1回答
如何在类组件中使用forwardRef与react-redux的连接函数
import React, { Component } from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <ChildCompon
浏览 3提问于2020-10-21得票数 0
我使用refs来访问子组件。
<MyComponent
ref='_my_refs'
...
/>
打电话给他们
this.refs._my_refs.scrollToTop();
我得到下面的错误
警告:不能给函数组件参考。访问此引用的尝试将失败。您是想使用React.forwardRef()吗？
浏览 0提问于2020-01-28得票数 5
回答已采纳
我正在开发反应-本土项目。
我已经创建了一个自定义组件，在其中我使用第三方库组件。第三方库组件需要代码中的useRef钩子，这样我就可以控制库组件。
import React, {useRef} from 'react';
...
const MyComponent = () => {
const ref = useRef();
return (
<View>
<Button
title="OPEN 3rd party component&
浏览 2提问于2021-03-10得票数 0
在我的父组件构造函数(基于类)中，我使用以下命令为输入字段添加ref： this.usernameRef = React.createRef(); 这在父组件中工作得很好。例如，以下代码可以很好地工作： const username = this.usernameRef.current.value; // this works 我将引用的.focus()调用传递给子组件，如下所示： <ChildComponent
onClick={() => this.usernameRef.current.focus()}
/> 在我的子组件中，它被一个onClick事件调用：
浏览 32提问于2021-11-23得票数 0
2回答
我创建了一个ref，并将其作为参数传递给组件。现在，我如何才能在没有调度的情况下将其写入State？
const myRef = createRef<any>();
const KeyboardAvoidingWrapper: React.FC<IKeyboardAvoidingProps> = (
props: IKeyboardAvoidingProps,
=> {
if (isAndroid) {
return (
<ScrollView ref={myRef} style={styles.scroll} conte
浏览 19提问于2020-11-12得票数 0
我试图将多次引用传递给孩子的孩子，但它不起作用。我有一个使用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
回答已采纳
我正在制作一个自定义输入组件。
const CustomInput = (props) => {
console.log(props);
return (
<TextInput
{...props}
ref={props.ref}
placeholder={props.placeholder}
style={{ ...styles.text, ...props.style }}
/>
);
};
在我想要使用的文件中
const ForgottenPasswordScreen = (props) =&
浏览 2提问于2022-03-18得票数 1
回答已采纳
我正在尝试使用React.forwardRef，但在如何让它在基于类的组件(而不是特定组件)中工作的问题上遇到了麻烦。
因此，从ref.js文件中类似于的内容开始：
const TextInput = React.forwardRef(
(props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />)
);
而不是像这样定义它：
class TextInput extends React.Component {
render() {
le
浏览 278提问于2018-07-26得票数 135
回答已采纳
在我正在处理的React代码库中，我有一个自定义钩子，它接受一个RefObject作为参数，并附带一个提供程序用于这样的钩子：
export const ScrollUtilsProvider = React.forwardRef<HTMLDivElement, ScrollUtilsProviderProps>(
(props, ref) => {
const scrollUtils = useScrollUtils(ref) // issue happens on this line
return <div ref={ref}><Sc
浏览 7提问于2022-07-17得票数 8
回答已采纳
1回答
在尝试调试web浏览器中的本机响应时，我无法看到任何组件名称。无论是通过标准浏览器DevTools或React (组件)浏览器扩展，我都看不到对组件名称的任何引用，甚至看不到对classNames的引用。
组件名称在React扩展中被View、Anonymous、Screen等混淆。部分代码是如何使用本机的默认View和Screen组件编写的。但我预计最终会看到子组件嵌套。
CSS类采用css-xyz123格式，似乎与它们的实际组件和类名无关。
有人知道为什么会发生这种情况，或者如何使组件名称在web调试中可见？我考虑了几个原因：
如何编写组件(功能组件，通常用Mobx o
浏览 3提问于2021-07-01得票数 0
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
回答已采纳
1回答
我面临的问题，参考-我需要参考功能组件和传递道具到它。到目前为止，我已经得到了我的父组件和子组件。在我的父组件中，我需要对我的子组件使用ref。我需要在我的父组件中使用projectSectionItem。
父母：
const projectSectionItem = useRef<HTMLDivElement>(null);
return i.showOnHP === 1 ?
<Project key={index}
url={`${URL}${i.button_image.image}`}
浏览 2提问于2020-06-01得票数 4
3回答
我有一个Table组件，我希望将ref附加到其中。
用途: Table.js
class Table extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: 1,
dataLength: props.dataLength,
}
this.tableRef = React.createRef();
}
componentDidUpdate() {
//using ref
this.tableRef.cu
浏览 1提问于2018-12-30得票数 7
我需要使用转发的refs
const InfoBox = React.forwardRef((props, ref) => (
<div ref={ref} >
<Rings >
</Rings>
<Tagline />
</div>
));
我也碰巧已经有了这样的代码
class InfoBox extends React.Component {
constructor(props) {
super(props)
}
render () {
浏览 4提问于2019-11-21得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
