Question

为什么 ref 总是为空？

2019-12-27

3569

javascript reactjs

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

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

Answer 1

一旦父组件中为其子组件之一提供了 ref ，您就需要应用所谓的转发引用技术，如文档所述：

Ref forwarding is a technique for automatically passing a ref through a component to one of its children. This is typically not necessary for most components in the application.

假设父组件中有以下内容：

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 存储库： https://github.com/norbittrial/react-forwarding-ref-example

我希望这个有帮助！