道具為 null 時反應組件返回問題

Question

export default function RenderPages({storage, setStorage, state, setState}){
  let elRefs= useRef()
  
  if(!storage) return
  if(!state.currentFileId || !state.currentFolderId) return
  
  const content = storage[state.currentFolderId][state.currentFileId].content

  return (
    <div className="writing">
      <input ref={elRefs}/>
      {content.map((page, index)=>
      <div className='textarea'>
        <textarea placeholder='write here' value={page} id={"page"+index} onChange={(e)=>onChange(e, index)} rows={rows} cols={cols}></textarea>
      </div>)}
    </div>
  )
}

有一些道具（狀態，存儲），它們有時是 null 值。 我現在正在做的是檢查 state 和存儲的值，如果這些值是 null，則提前返回空白。 如果我不提前返回，變量“content”會出錯，因為它需要 state 和存儲值。 現在這就是問題所在。 我想使用“useRef”，如果組件提前返回“elRefs”被分配了 null 值，所以我無法獲取 DOM 元素。 我應該怎么辦？

Answer 1

我將您的布爾值放入單個 function 並分離組件的可渲染部分。 如果 bool 為 false，則根本不會渲染該組件。 當然，您可以在其中放入其他顯示錯誤數據或加載 gif 或類似內容的組件。 希望這有效

 export default function RenderPages({ storage, setStorage, state, setState }) { const elRefs = useRef() const content = storage[state.currentFolderId][state.currentFileId].content // content to render in seperate component const Pages = () => ( <div className="writing"> <input ref={elRefs} /> { content.map((page, index) => <div className='textarea'> <textarea placeholder='write here' value={page} id={"page" + index} onChange={(e) => onChange(e, index)} rows={rows} cols={cols} /> </div> ) } </div> ) // decide to or not to render component const renderable = storage && state.currentFileId && state.currentFolderId return ( <> { renderable? <Pages />: <></> // returns empty component } </> ) }