反應嵌套 2 級 object 的參考

Question

假設這個結構

const Foo = () => {
    const bazRefs = React.useRef<Array<HTMLDivElement | null>>([]); // List of Baz wanted

    return <div>{[0, 1, 2, 3].map((i) => <Bar ref={(el) => (bazRefs.current[i] = el)} />)}</div>
}

const Bar = React.forwardRef<HTMLDivElement>(({ }, ref) => {
    return <div>{[0, 1, 2].map(() => <Baz />)}</div>
})

const Baz = () => {
    return <div ref={ref}>Test</div>
}

我知道通過回調我可以獲得Bar的列表，但是Baz的聚合列表怎么樣？

Answer 1

您可以在Foo組件中定義一個 Refs 數組並使用 for 循環來分配初始值：

  for (...){
    myRef = useRef()
  }

然后您可以將其傳遞給子組件。