当我编写此代码时,出现错误:
无法在回调内部调用React Hook的“ useRef”。必须在React函数组件或自定义的React Hook函数中调用React Hooks
我应该如何处理此代码?
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>
);
}
最佳答案
这有两种可能性,一种是将useRef
与一个对象/数组一起使用,或者是由Yevgen Gorbunkov建议使用的createRef
。
我不确定这些功能的可行性,因为createRef
选项将在每个渲染上创建全新的引用,而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>
);
}