Javascript 如何使用ref React数组将ref传递给子对象的子对象？

我试图将多次引用传递给孩子们的孩子们，但它不起作用。我有一个名为

AvatarBuilder

的功能组件，它使用

Avatars

组件。此组件呈现

化身
组件列表。其思想是在
AvatarBuilder
中引用每个
Avatar
组件

以下是总结的代码片段：

const AvatarBuilder=props=>{
...
//在这个虚拟示例中，我有5个化身
常量URL=[1,2,3,4,5]；
const refs=url.map（item=>（{ref:React.createRef（）}））；
返回(
);
常量化身=React.forwardRef（（道具，ref）=>{
让urlList=props.urlList.map（（url，索引）=>{
返回(
)
})
返回(

{urlist}

)
});
const Avatar=React.forwardRef（（道具，ref）=>{
返回(


)
});

我收到以下警告，并且在安装所有组件时，refs阵列不会更新

index.js:1 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `ForwardRef`.
    in h (at Avatar.js:11)
    in li (at Avatar.js:10)
    in ForwardRef (at Avatars.js:10)
    in ul (at Avatars.js:24)
    in ForwardRef (at AvatarBuilder.js:189)
    in AvatarBuilder (at App.js:19)
    in div (at App.js:14)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

知道该如何修复吗？谢谢！
试试这个

const AvatarBuilder = props => {
    ...
    // in this dummy example i would have 5 avatars
    const URLS=[1,2,3,4,5];
    const refs = URLS.map(item => React.createRef());
    return (
        <>
            <Avatars
                refs={refs}
                urlList={URLS}
            />
        </>
    );

// you don't need to make it with `fowardRef()`
const Avatars = (props) => {
    const {refs} = props;
    let urlList = props.urlList.map((url, index) => {
        console.log(url, index, typeof (index), ref);
        return (
            <Avatar
                ref={refs[index]}
                url={url}
            />
        )
    })
    return (
        <ul className="Avatars" >
            {urlList}
        </ul>
    )
};

const Avatar = React.forwardRef((props, ref) => {
    return (
        <li className="Avatar">
            <img
                src={props.url}
                ref={ref}
            />
        </li>
    )
});

const AvatarBuilder=props=>{
...
//在这个虚拟示例中，我有5个化身
常量URL=[1,2,3,4,5]；
const refs=url.map（item=>React.createRef（））；
返回(
);
//您不需要使用'fowardRef（）`
常量化身=（道具）=>{
常量{refs}=props；
让urlList=props.urlList.map（（url，索引）=>{
日志（url、索引、类型（索引）、参考）；
返回(
)
})
返回(

{urlist}

)
};
const Avatar=React.forwardRef（（道具，ref）=>{
返回(


)
});
对于功能组件，必须使用useRef而不是React.createRef，因为将在渲染中创建新的refs实例

如果使用React.createRef，则使用UseMoom来记忆引用


const AvatarBuilder=props=>{
//在这个虚拟示例中，我有5个化身
常量URL=[1,2,3,4,5]；
const refs=React.usemo（（）=>url.map（item=>（{ref:React.createRef（）}）），[]）；//只创建一次引用
React.useffect（（）=>{
控制台日志（参考文献）；
},[])
返回(
);
}
常量化身=React.forwardRef（（道具，ref）=>{
让urlList=props.urlList.map（（url，索引）=>{
返回(
)
})
返回(

{urlist}

)
});
const Avatar=React.forwardRef（（道具，ref）=>{
返回(


)
});
ReactDOM.render（，document.getElementById（'app'）；