道具为 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 } </> ) }