javascript - 我如何使用多个引用来嵌套带有钩子(Hook)的元素数组，或任何其他方式

Question

首先，我找到了 solution在这里，它适用于单个元素数组。但我的问题是关于组件的嵌套数组。例如:

const { useRef, useState, useEffect } = React;

const arr1 = [A, B, C]
const arr2 = [1, 2, 3]

const App = () => {
  const popoverRefs = useRef([]);

  return (
    <div>
      {arr1.map((parentItem, index) => {
        return(
          <div>
            A Parent Element {parentItem.label}
            {arr2.map((childItem, index2) => {
              return (
                <div ref={????}>
                  A Child Element {childItem.label}     
                </div>
              )
             })}
          </div>
        )
      })}
    </div>
  );
};

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

在此示例中，我如何使用 useRef 或 createRef 分别获取每个 parent 的 child 的引用，以便我可以使用这些引用来锚定其他 View 例如弹出框。

Answer 1

您可以将子项提取到一个单独的组件中并在那里创建引用。

const { useRef, useState } = React;

const arr1 = ["A", "B", "C"];
const arr2 = [1, 2, 3];

const Child = ({ childItem }) => {
  const liRef = useRef();
  const handleClick = () => {
    liRef.current.classList.toggle("highlight");
  };
  return (
    <div ref={liRef}>
      A Child Element {childItem}{" "}
      <button onClick={handleClick}>Highlight</button>
    </div>
  );
};

const App = () => {
  return (
    <div>
      {arr1.map((parentItem, index) => {
        return (
          <div key={index}>
            <strong>A Parent Element {parentItem}</strong>
            {arr2.map((childItem, index2) => {
              return <Child childItem={childItem} key={index2}></Child>;
            })}
          </div>
        );
      })}
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

.highlight {
  background: yellow;
  color: red;
}

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>