Question

在下面的示例中，未应用StyledButton上的背景样式。当组件的初始渲染中未包含片段时，似乎会发生这种情况。例如，如果我们仅在此处渲染StyledComponent，则它将具有预期的黑色背景。这是预期的行为吗？

注意：我正在使用带有Typescript的create-react-app

const StyledButton = styled.button`
  background: black;
`

function TestComponent(props) {
  const [x, setX] = useState(true)

  useEffect(() => {
    const timeout = setTimeout(() => {
      setX(false)
    }, 600)
    return () => {
      clearTimeout(timeout)
    }
  }, [])
  if (x) {
    return <>{'test'}</>
  }
  return <StyledButton>test</StyledButton>
}

Answer 1

嗨，我相信这是因为您正在检查render函数之外的状态，因此不会在每次重新渲染时都对其进行检查，因此以下代码应该有所帮助。有任何疑问，请告知我们。

const StyledButton = styled.button`
  background: black;
`

function TestComponent(props) {
  const [x, setX] = useState(true)

  useEffect(() => {
    const timeout = setTimeout(() => {
      setX(false)
    }, 600)
    return () => {
      clearTimeout(timeout)
    }
  }, [])

  return(
    <>
      {x ? <>{'test'}</> :  <StyledButton>test</StyledButton>}
    </>
  )
}

样式组件未对从初始渲染中排除的片段应用样式

1 个答案: