Javascript 在循环内创建参照
我正在尝试根据输入数组的长度创建多个引用Javascript 在循环内创建参照,javascript,reactjs,Javascript,Reactjs,我正在尝试根据输入数组的长度创建多个引用 export default function test(props) { const numRefs = props.data.length; let [refs, setRefs] = useState([]); for (let i = 0; i < numrefs; i++) { let ref = useRef(null); setRefs(result => [...res
export default function test(props) {
const numRefs = props.data.length;
let [refs, setRefs] = useState([]);
for (let i = 0; i < numrefs; i++) {
let ref = useRef(null);
setRefs(result => [...result, ref]);
}
return (
<div>
// Then I want to return numRefs number of divs each with a ref = one of ref from refs array
<div ref = {}></div>
</div>
)
}
导出默认功能测试(道具){
const numRefs=props.data.length;
让[refs,setRefs]=useState([]);
for(设i=0;i[…result,ref]);
}
返回(
//然后我想返回numRefs div数,每个div的ref=refs数组中的一个ref
)
}
React不允许在循环中有钩子,我得到了错误->
“React Hook”useRef可以执行多次。可能是因为它是在循环中调用的。在每个组件渲染中,必须以完全相同的顺序调用React挂钩
有可能实现这一点吗?使用回调方法在循环中分配引用。您不需要多个useRef实例。可以创建一个ref并将所有ref存储到其中的div
export default function test(props) {
const numRefs = props.data.length;
let [refs, setRefs] = useState([]);
let divRef = useRef({});
return (
<div>
{Array.from(new Array(20)).map((_, i) => <div ref = {ref => divRefs.current[i] = ref}></div>)}
</div>
)
}
导出默认功能测试(道具){
const numRefs=props.data.length;
让[refs,setRefs]=useState([]);
设divRef=useRef({});
返回(
{Array.from(new Array(20)).map((u,i)=>divRefs.current[i]=ref}>)}
)
}