通过 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>