如何解决对元素位置反应UseRef和forwardRef问题
我已成功连接组件Details.js
以便管理组件本身的状态,这些步骤如下:
您可以观看演示here
Details.js
import React,{ useState,useEffect,useRef,ref,useImperativeHandle,forwardRef } from "react";
const cleanValue = () => {
setDataHomeTeam([]);
setDataAwayTeam([]);
};
useImperativeHandle(fowardedRef,() => {
return {
cleanValue: cleanValue
};
});
const ConnectedDetails = connect(
mapStatetoProps,mapdispatchToProps,null
)(Details);
export default forwardRef((props,ref) => {
return <ConnectedDetails {...props} fowardedRef={ref} />;
});
App.js
const ref = useRef();
<button onClick={() => ref.current.cleanValue()} type="button">Reset</button>
<Details ref={ref} />
它有效,演示为here。
我的问题是,当我将这个元素从 App.js 移到 Leagues.js 时,就像在演示中所看到的(两种情况)
Leagues.js
第71行
<button onClick={() => ref.current.cleanValue()} type="button">Reset</button>
单击它时出现此错误=> TypeError无法读取未定义的属性'cleanValue'
有可能吗?如果是,我在做什么错,我该如何解决?
解决方法
如评论中所指出,主要问题是ref
组件中的Leagues
引用未指向Details
组件。
可以对原始代码进行以下3处修改,以使Leagues
组件中的按钮起作用:
-
向
onReset
组件添加Leagues
属性let Leagues = ({ getList,getStats,leaguesList,loading,getDetail,teamsDetail,onReset })
-
使用
onReset
组件中的Leagues
函数原始:
<button onClick={() => ref.current.cleanValue()} type="button">
新:
<button onClick={onReset} type="button">
-
将
onReset
组件的Leagues
属性设置为一个函数,该函数将调用cleanValue()
组件的Details
方法原文:
<Leagues />
新:
<Leagues onReset={() => ref.current.cleanValue()} />
完整代码可在here中找到。
请注意,从体系结构的角度来看,不建议组件通过引用访问其同级组件。通过父组件可以更好地处理许多似乎需要这样做的场景。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。