反应元素位置的 UseRef 和 forwardRef 问题

Question

我已成功连接我的组件Details.js以便管理组件本身的状态，这些是步骤：你可以在这里看到演示细节.jsimport 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} />;});应用程序.jsconst ref = useRef();  <button onClick={() => ref.current.cleanValue()} type="button">Reset</button><Details ref={ref} />它有效，演示在这里。我的问题是当我将此元素从App.js移动到Leagues.js时，您可以在演示中看到（两种情况）联赛.js71号线<button onClick={() => ref.current.cleanValue()} type="button">Reset</button>当我点击它时出现此错误 => TypeError Cannot read property 'cleanValue' of undefined是否可以 ？如果是，我做错了什么，我该如何解决？

Answer 1

正如评论中所指出的，主要问题是组件ref内的引用Leagues未指向Details组件。

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

1. onReset向Leagues组件添加属性

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

2. 使用组件onReset中的函数Leagues

   原文： <button onClick={() => ref.current.cleanValue()} type="button">

   新的： <button onClick={onReset} type="button">
   
   

3. onReset将组件的属性设置为将调用组件方法的Leagues函数cleanValue()Details

   原来的： <Leagues />

   新的： <Leagues onReset={() => ref.current.cleanValue()} />
   
   

完整的代码可以在这里找到。

请注意，从架构的角度来看，不建议组件通过引用访问其兄弟组件。许多似乎需要这样做的场景可能通过父组件更好地处理。