我想在我的 react 組件中有條件地渲染一個影像，如下所示：{noTasks && <Image />}
它在 Firefox 中作業得很好，但在 Chrome 事件中卻沒有，盡管 Chrome 也檢測到 noTasks === true。我在這里錯過了什么？
在<Image />本身沒有任何特殊的造型和定位
import React from 'react'
import styled from 'styled-components'
const StyledImg = styled.img`
width: 80%;
margin-bottom: 50px;
`
const Image = () => <StyledImg src='/assets/toDo.webp' alt='a woman with a task planner' />
export default Imageconst 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>
)
}uj5u.com熱心網友回復：
根據您的描述，問題可能出在<Image />組件的實作上。
您可以使用開發人員工具檢查頁面的來源，以了解 React 如何呈現ToDos組件（右鍵單擊 --> 在 Chrome 上檢查）。你能確認你是否已經這樣做了嗎？
我的猜測是，這可能是一個樣式問題，其中Image組件的內容被呈現（img頁面源中有一個標簽），但以一種不可見的方式進行了樣式設定。例如，它可以被絕對定位，這在某些情況下會導致瀏覽器之間的行為不同。
它也可能是由<Image />組件中的一些實作細節引起的。通過提供更多關于<Image />組件的背景關系，跟隨助手可能更容易找到問題的可能原因。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/361000.html
標籤：javascript 反应 反应还原