Question

我在下面有一个组件，在第一个渲染中，我要输入正确的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>
  )
}

Answer 1

一旦父组件中有一个子组件中有ref，则需要申请Forwarding Ref technique，如文档所述：

引用转发是一种自动将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存储库：https://github.com/norbitrial/react-forwarding-ref-example

我希望这会有所帮助！

为什么ref总是为null？

1 个答案: