Typescript React：如何在子组件中使用前向引用中的数据

正如你所指出的，ref可以是不同类型的，所以TypeScrip不知道该建议什么.可以是((instance: T | null) => void)，也可以是MutableRefObject<T | null>或null. 这将是提取其价值的一种方式:

  function onClick() {
    let extracted: number | null=null;
    if (ref) { // TypeScript infers it's not null inside the clause
      if (typeof ref === 'function') { // TypeScript infers it's a function
        ref(1); // not sure what that actually does, I guess it's a setter when you pass a "callback" with ref = React.createRef()
      } else { // TypeScript infers there's only one possibily left: it has the "current" property.
        extracted = ref.current;
      }
    }
    console.log(extracted)
  }

既然你已经控制了ChildCompoent米，你其实并不需要把它包起来.您只需go 除forwardRef的魔力，并将someData作为常规对象传递，即可进行如下处理:

function ParentComponent()=> {
    const someData = useRef(1);
    console.log("rendering parent")
    useEffect(() => {
        const timer = setTimeout(() => {
            someData.current = 2
        }, 1000);
        return () => clearTimeout(timer);
    }, [])
    return (
        <ChildComponent someData={someData}/>
    );
}


function ChildComponent(ref: { someData: MutableRefObject<number> }) {
    function onClick() {
        console.log("clicked with no:", ref.someData.current)
    }

    console.log("rendering child")
    return <button onClick={onClick} type='button'></button>;
}

将记录

rendering parent // might be appear twice but only b/c you run it in dev environment
rendering child // as above
clicked with no: 1 // if you're fast enough
clicked with no: 2 

useRef背后的整个思想是，您只是传递一个对值的引用(例如someData.current)，因此可以在引擎不注意到组件更新(b/c someData仍然是相同的对象)的情况下操作它，因此不需要启动重现器.既然没有更多的东西，你可以用任何你喜欢的方式传递它.