样式组件未在初始渲染中排除的片段上应用样式答案

【问题标题】：Styled-components not applying style on fragment excluded from initial render样式组件未在初始渲染中排除的片段上应用样式
【发布时间】：2020-03-29 09:09:33
【问题描述】：

在下面的示例中，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>
}

【问题讨论】：

你给出的例子似乎是work fine
@Agney 如果是这样的话，可能是 Typescript 编译器搞砸了
@alsco77 您是否检查过 DOM，确认按钮应用了一个包含 background 属性的类？在沙箱中，您的示例运行良好。
@trixn 这似乎只在使用 Brave 浏览器时才会发生。我刚刚签入了 Chrome，它在那里工作正常......

标签： reactjs typescript styled-components

【解决方案1】：

您好，我相信这是因为您正在检查渲染函数之外的状态，因此不会在每次重新渲染时重新检查它，以下代码应该会有所帮助。如果你有问题就告诉我们。

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>}
    </>
  )
}

【讨论】：

return之外没有禁止检查状态的规则
因为这是一个功能组件，所以整个组件就是“渲染”功能。您的示例与原始代码等效，只是它添加了一个片段。
但是，原始示例也适用于我，但我给出的版本应该仍然有效，并且更具可读性（imo）