Question

我在盖茨比（Gatsby）中使用了样式组件，并试图使主页成为全屏英雄，而该主页并未被移动设备上的导航栏覆盖。我正在尝试通过在页面加载后将图像的高度调整为window.innerHeight来实现这一目标。

我用于执行此操作的代码是：

const HeightlessHero = styled(BackgroundImage)`
  width: 100%;
  height: ${props => props.realHeight};`

const HeroImage = (props) => {
  const [height, setHeight] = useState('100vh');

  useEffect(() => {
    setHeight(window.innerHeight+'px');
  }, [window.innerHeight]);

  return <HeightlessHero {...props} realHeight={height} />;
}

很遗憾，此操作无效，将初始高度保持在useState中。但是，当我检查开发工具时，状态本身正在成功更新。

下面的代码确实可以成功运行，但是据我所知，这不是编写React的好方法。


const HeroImage = (props) => {
  const [height, setHeight] = useState('100vh');
  const HeightlessHero = styled(BackgroundImage)`
    width: 100%;
    height: ${props => props.realHeight};`

  useEffect(() => {
    setHeight(window.innerHeight+'px');
  }, [window.innerHeight]);

  return <HeightlessHero {...props} realHeight={height} />;

问题是，为什么第一个示例不起作用？如何使它起作用？

样式化组件不随道具更改而更新

0 个答案: