reactjs 在react中,我怎样用map给元素添加多个引用?

v1uwarro  于 2023-01-08  发布在  React
关注(0)|答案(2)|浏览(128)
export default function RenderPages({storage, setStorage, state, setState}){
const elRefs=[]
for(let i=0; i<storage[state.currentFolderId][state.currentFileId].content.length; i++){
    elRefs.push(useRef())
}

return (
    <>
    {
      renderable
      ?<div className="writing">
        {storage[state.currentFolderId][state.currentFileId].content.map((page, index)=>
        <div className='textarea'>
          <textarea ref={elRefs[index]} placeholder='write here' value={page} id={"page"+index} onChange={(e)=>onChange(e, index)} rows={rows} cols={cols}></textarea>
        </div>)}
      </div>
      : <></>
    }
    </>
  )
}

我想附加多个引用到“textarea”元素的随机数。元素的数量将由变量“storage”决定,这是作为 prop 。我得到了上述代码的错误。请帮助我。

aor9mmx1

aor9mmx11#

你不需要使用for循环来推送ref中的元素,你已经在return中使用了map,你可以像这样使用ref推送textarea元素,正如你可以看到下面的代码,我希望这能起作用。谢谢

import { useRef } from "react";

export default function RenderPages({storage, setStorage, state, setState}) {
  const elRefs = useRef([]);

  return (
    <>
      {renderable ? (
        <div className="writing">
          {storage[state.currentFolderId][state.currentFileId].content.map((page, index) => (
            <div className="textarea">
              <textarea
                ref={ref => {
                  elRefs.current[index] = ref
                }}
                placeholder="write here"
                value={page}
                id={'page' + index}
                onChange={e => onChange(e, index)}
                rows={rows}
                cols={cols}></textarea>
            </div>
          ))}
        </div>
      ) : (
        <></>
      )}
    </>
  );
}
hgqdbh6s

hgqdbh6s2#

const myRefs = useRef([])
ref={ref => myRefs.current[index] = ref} // <--- Right syntax
  • 使用一个具有多个电流元件的基准电压源就足够了
  • 不应该(也不需要)在循环中调用钩子,在这种情况下,它是无效的https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

相关问题