Javascript 为什么ref总是空的？_Javascript_Reactjs

Javascript 为什么ref总是空的？

javascript reactjs

Javascript 为什么ref总是空的？,javascript,reactjs,Javascript,Reactjs,我在下面有一个组件，在第一次渲染时我输入了正确的ref，但是在下一次渲染时，我总是得到null，请告诉我为什么？ref通过道具传递到输入： const inputRef = useRef(null); useEffect(() => { setTimeout(() => { if (inputRef.current) { inputRef.current.focus(); } }); }, [inputRef]); render() {

我在下面有一个组件，在第一次渲染时我输入了正确的ref，但是在下一次渲染时，我总是得到null，请告诉我为什么？ref通过道具传递到输入：

const inputRef = useRef(null);
useEffect(() => {
  setTimeout(() => {
    if (inputRef.current) {
        inputRef.current.focus();
    }
  });
 }, [inputRef]);

render() {
  return(
    <div>
      <FirstComponent />
      {({ selectedItem, items }) => (
             <SecondCompontnt
                inputRef={inputRef}
                items={items}
                onSelect={onSelect}
                value={selectedItem}
              />
          )}
    </div>
  )
}

一旦父组件中有一个子组件的ref，则需要应用所谓的ref，如文档所述：

Ref转发是一种将Ref通过组件自动传递给其子组件的技术。对于应用程序中的大多数组件来说，这通常不是必需的

假设您在父组件中有如下内容：

const childDivRef = useRef(null);

return <>
  <ChildComponent ref={childDivRef} />
</>

然后，您需要在子组件中包含以下内容：

import React, { forwardRef } from 'react';

const ChildComponent = forwardRef((props, ref) => {
    return <div ref={ref} className="child-component">
        <h3>Child component</h3>
    </div>
})

如果您需要一个工作示例，请查找我之前制作的GitHub存储库：

我希望这有帮助