通過 React.cloneElement 獲取對 props.children 的引用總是返回 null

Question

我試圖在 Wrapper 組件中獲取子引用，但它總是返回 null。 我使用通用代碼：

export const SelectableItem = ({ children }: Props) => {
    const ref = useRef<HTMLElement>(null);

    useEffect(() => {
        setTimeout(() => console.log(ref?.current), 1000); // returns null
    }, []);

    const child = React.Children.only(children);

    return React.cloneElement(child, { ref: (r) => (ref.current = r) });

};

<SelectableItem>
   <SomeChild />
</SelectableItem>

怎么了？

Answer 1

我沒有得到那個問題。 我真正改變的唯一一件事是 console.log 因為它產生了錯誤。 希望您能夠從下面的工作代碼中弄清楚發生了什么。

 const SelectableItem = ({ children }: Props) => { const ref = React.useRef(null); React.useEffect(() => { setTimeout(() => { console.log(ref) }, 1000); }, []); const child = React.Children.only(children); return React.cloneElement(child, { ref: (r) => (ref.current = r) }); }; ReactDOM.render( <React.StrictMode> <SelectableItem> <div /> </SelectableItem> </React.StrictMode>, document.querySelector('.react') );

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>