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

在下面的示例中，

StyledButton

上的背景样式未被应用。当组件的初始呈现中不包含片段时，似乎会发生这种情况。例如，如果我们只是在这里渲染StyledComponent，它会像预期的那样具有黑色背景。这是预期的行为吗

注意：我正在使用带有Typescript的createreact应用程序

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

const StyledButton=styled.button`
背景：黑色；
`
功能测试组件（props）{
常数[x，setX]=useState（真）
useffect（（）=>{
常量超时=设置超时（（）=>{
setX（假）
}, 600)
return（）=>{
clearTimeout（超时）
}
}, [])
if（x）{
返回{'test'}
}
回归试验
}

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

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

const StyledButton=styled.button`
背景：黑色；
`
功能测试组件（props）{
常数[x，setX]=useState（真）
useffect（（）=>{
常量超时=设置超时（（）=>{
setX（假）
}, 600)
return（）=>{
clearTimeout（超时）
}
}, [])
返回(
{x？{'test'}:test}
)
}

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

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

const StyledButton=styled.button`
背景：黑色；
`
功能测试组件（props）{
常数[x，setX]=useState（真）
useffect（（）=>{
常量超时=设置超时（（）=>{
setX（假）
}, 600)
return（）=>{
clearTimeout（超时）
}
}, [])
返回(
{x？{'test'}:test}
)
}

您给出的示例似乎是@Agney，如果是这种情况，可能是Typescript编译器弄乱了事情up@alsco77您是否检查过DOM，确认按钮应用了一个类，该类包含

background

属性？在沙箱中，您的示例运行良好。@trixn这似乎只有在使用Brave browser时才会发生。我刚刚检查了Chrome，它在那里工作得很好……你给出的例子似乎是@Agney，如果是这样的话，可能Typescript编译器把事情搞糟了up@alsco77您是否检查过DOM，确认按钮应用了一个类，该类包含

background

属性？在沙箱中，您的示例运行良好。@trixn这似乎只有在使用Brave browser时才会发生。我刚刚检查了Chrome，它在那里工作得很好……没有规则禁止在

return

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

return

之外的状态，因为这是一个功能组件，整个组件就是“render”功能。您的示例与原始代码等效，只是它添加了一个片段。但是，是的，原始示例也适用于我，我给出的版本应该仍然适用，并且可读性更强（imo）