Javascript 针对元素位置的React UseRef和forwardRef问题

我已成功连接我的组件

Details.js

，为了管理组件本身的状态，以下是步骤：

你可以看到演示

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} />;
});

const ref = useRef();  
<button onClick={() => ref.current.cleanValue()} type="button">Reset</button>
<Details ref={ref} />

import React，{useState，useffect，useRef，ref，useImperialiveHandle，forwardRef}来自“React”；
常量cleanValue=（）=>{
setDataHomeTeam（[]）；
setDataAwayTeam（[]）；
};
使用命令式句柄（fowardedRef，（）=>{
返回{
cleanValue:cleanValue
};
});
const ConnectedDetails=连接(
MapStateTops，
mapDispatchToProps，
无效的
)（详情）；
导出默认forwardRef（（道具，ref）=>{
返回；
});

App.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} />;
});

const ref = useRef();  
<button onClick={() => ref.current.cleanValue()} type="button">Reset</button>
<Details ref={ref} />

const ref=useRef（）；
ref.current.cleanValue（）}type=“button”>重置

它工作，演示是

我的问题是当我将这个元素从App.js移动到Leagues.js时，正如您在演示中看到的那样（这两种情况都有）

Leagues.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} />;
});

const ref = useRef();  
<button onClick={() => ref.current.cleanValue()} type="button">Reset</button>
<Details ref={ref} />

第71行

<button onClick={() => ref.current.cleanValue()} type="button">Reset</button>

ref.current.cleanValue（）}type=“button”>重置

当我点击它时，我得到了这个错误=>TypeError无法读取未定义的属性'cleanValue'

---

可能吗？如果是的话，我做错了什么？我该如何解决这个问题？

正如评论中指出的，主要问题是

联盟中的
ref
引用没有指向
详细信息
组件。



可以对原始代码进行以下3项修改，以使
Leagues
组件中的按钮正常工作：


将
onReset
属性添加到
Leagues
组件

 let Leagues = ({
       getList,
       getStats,
       leaguesList,
       loading,
       getDetail,
       teamsDetail,
       onReset
     })


使用
Leagues
组件中的
onReset
功能

 let Leagues = ({
       getList,
       getStats,
       leaguesList,
       loading,
       getDetail,
       teamsDetail,
       onReset
     })

原件：
ref.current.cleanValue（）}type=“button”>

新增：





将
Leagues
组件的
onReset
属性设置为调用
Details
组件的
cleanValue（）
方法的函数

 let Leagues = ({
       getList,
       getStats,
       leaguesList,
       loading,
       getDetail,
       teamsDetail,
       onReset
     })

原件：

新建：
ref.current.cleanValue（）}/>




可以找到完整的代码

请注意，从架构的角度来看，不建议组件通过引用访问其同级。许多似乎需要这样做的情况下，可以通过父组件更好地处理。
您又遇到问题了吗？：）它工作得很好，我现在的问题是，我现在正试图让按钮在League.js中工作，而不是在App.js中。感谢联盟组件中的
ref
从未给出值-不清楚（对我来说）你想要实现什么。你只需移动你的ref创建，仍然将ref设置为细节组件，它应该在
App
中工作，而在
League
中将
ref
传递给
Details
，而不是。将
详细信息
组件添加到渲染输出，并将
ref
传递给它。