條件渲染在 Chrome 中不起作用

Question

我想有條件地在我的反應組件中渲染圖像，如下所示： {noTasks && <Image />}它在 Firefox 中工作得很好，但在 Chrome 事件中卻不行，盡管 Chrome 也檢測到 noTasks === true。 我在這里想念什么？

 const ToDos = () => { const tasks = useSelector((state) => state.todos.items) const noTasks = useSelector((state) => state.todos.items.length === 0) const dispatch = useDispatch() const trashCanIcon = <FontAwesomeIcon icon={faTrashAlt} /> /* const editIcon = <FontAwesomeIcon icon={faPen} /> */ const onToggleIsComplete = (id) => { dispatch(todos.actions.toggleIsComplete(id)) } return ( <ContainerDiv> {noTasks && <Image />} {tasks.map((task) => ( <StyledForm key={task.id} category={task.category} completed={task.isComplete} > <ToDoLabel completed={task.isComplete} htmlFor='completed'>{task.task} </ToDoLabel> <div> <input id='completed' type='checkbox' onChange={() => onToggleIsComplete(task.id)} /> {/* <button >{editIcon}</button> */} <button onClick={() => dispatch(todos.actions.removeToDo(task.id))}> {trashCanIcon}</button> </div> <StyledParagraph>{moment(task.newDate).format("D. MM. YYYY")}</StyledParagraph> </StyledForm> ))} </ContainerDiv> ) }

Answer 1

根據您的描述，問題可能出在<Image />組件的實現上。

您可以使用開發人員工具檢查頁面的來源，以了解 React 如何呈現ToDos組件（右鍵單擊 --> 在 Chrome 上檢查）。 你能確認你是否已經這樣做了嗎？

我的猜測是，這可能是一個樣式問題，其中Image組件的內容被渲染（頁面源代碼中有一個img標簽），但以不可見的方式設置樣式。 例如，它可以絕對定位，這在某些情況下會導致瀏覽器之間的行為不同。

它也可能是由<Image />組件中的一些實現細節引起的。 通過提供有關<Image />組件的更多上下文，以下幫助程序可能更容易找到問題的可能原因。