Javascript 为什么我能'；在回调中不调用useRef？

当我编写此代码时，我有一个错误：

不能在回调内调用React Hook“useRef”。必须在React函数组件或自定义React钩子函数中调用React钩子

我应该如何处理此代码

return ITEMS.map((item, i) => {
  const elementRef = useRef(null);
      return (
        <div
          ref={elementRef}
          key={i}
        >
          <p>{item.name}</p>
          <Wrapper>
            {item.name === visibleItem && (
                <Item
                  parentRef={elementRef}
                />
            )}
          </Wrapper>
        </div>
      );
    }

返回ITEMS.map（（item，i）=>{
const elementRef=useRef（null）；
返回(
{item.name}

{item.name==visibleItem&&(
)}
);
}

这里有两种可能性，要么对对象/数组使用

useRef

，要么按照叶夫根·戈尔邦科夫的建议使用

createRef

我不能完全确定它们的可行性，因为

createRef

选项将在每个渲染上创建全新的ref，而

useRef

选项需要确保键/索引始终相同

const ITEMS = [{ name: "test" }, { name: "test2" }];
export default function App() {
  const ref = useRef({});
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {ITEMS.map((item, idx) => {
        return (
          <div key={idx} ref={element => (ref.current[idx] = element)}>
            <p>{item.name}</p>
            <Wrapper>
              {item.name === visibleItem && (
                <Item parentRef={ref.current[idx]} />
              )}
            </Wrapper>
          </div>
        );
      })}
      {ITEMS.map((item, idx) => {
        const ref = createRef();
        return (
          <div key={idx} ref={ref}>
            <p>{item.name}</p>
            <Wrapper>
              {item.name === visibleItem && <Item parentRef={ref} />}
            </Wrapper>
          </div>
        );
      })}
    </div>
  );
}

const ITEMS=[{name:“test”}，{name:“test2”}]；
导出默认函数App（）{
const ref=useRef（{}）；
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
{ITEMS.map（（item，idx）=>{
返回(
（参考当前[idx]=元素）}>
{item.name}

{item.name==visibleItem&&(
)}
);
})}
{ITEMS.map（（item，idx）=>{
const ref=createRef（）；
返回(
{item.name}

{item.name==visibleItem&&}
);
})}
);
}

改用

createRef

？这是否回答了您的问题？