条件渲染在 Chrome 中不起作用

Question

我想像这样在我的反应组件中有条件地渲染图像：{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 Image

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 /> 组件的上下文，以下帮助者可能更容易找到问题的可能原因。

条件渲染在 Chrome 中不起作用

Conditional rendering doesn't work in Chrome

javascript

reactjs

react-redux