更新功能组件道具不会改变样式

Question

我有这个函数组件用于将跨度呈现为条形。当我渲染组件时，我将 scrolled 作为 false 传递。然后，当我滚动 150 像素时，jQuery 将属性更新为 true。我知道使用 jQuery 不是一个好习惯，我正在从中迁移。目前，我想让它发挥作用，因为我仍在学习功能组件。

export default function Button(props) {
  const [scrolled, setScrolled] = useState( props.scrolled );
  useEffect(() => {
    setScrolled(props.scrolled);
  }, [scrolled]);

  return (
    <HamburgerButton scrolled={scrolled}>
      <p>{scrolled}</p> 
      <span></span>
    </HamburgerButton>
  );
}

还有这个样式化的组件定义：

const HamburgerButton = styled.div`
  ...
  span {
        background: ${props => props.scrolled === 'false' ? props.theme.white : props.theme.black};
  }
  ...
`;

当我滚动时，我看到属性 scrolled 在 DOM 中从“假”变为“真”，但跨度保持白色。此外，带有{scrolled} 的段落标签不会从false 更改。

Answer 1

问题 您的代码会记住挂钩中的 props.scrolled 值。

export default function Button(props) {
  const [scrolled, setScrolled] = useState( props.scrolled ); // state initialized
  useEffect(() => { // hook called first render
    setScrolled(props.scrolled); // state updated with same value
  }, [scrolled]); // state value never changes during life of component so effect hook never recomputes

  return (
    <HamburgerButton scrolled={scrolled}>
      <p>{scrolled}</p> 
      <span></span>
    </HamburgerButton>
  );
}

解决方案 您可以直接将 prop 传递给 HamburgerButton

export default function Button(props) {
  return (
    <HamburgerButton scrolled={props.scrolled}>
      <p>{props.scrolled}</p> 
      <span></span>
    </HamburgerButton>
  );
}

或者使用钩子并使用正确的依赖项

export default function Button(props) {
  const [scrolled, setScrolled] = useState( props.scrolled );
  useEffect(() => {
    setScrolled(props.scrolled); // update state
  }, [props.scrolled]); // with the value that changes here

  return (
    <HamburgerButton scrolled={scrolled}>
      <p>{scrolled}</p> 
      <span></span>
    </HamburgerButton>
  );
}

对三元组的真分支使用正向比较，并利用 javascript 的真/假值。如果 scrolled 是 true 或任何其他真值，则渲染黑色，如果是 fasley，则 (false, 0, null, undefined) 渲染白色。

const HamburgerButton = styled.div`
  ...
  span {
    background: ${props => props.scrolled ? props.theme.black : props.theme.white};
  }
  ...
`;

或

const HamburgerButton = styled.div`
  ...
  span {
    background: ${props => props.theme[props.scrolled ? 'black' : 'white']};
  }
  ...
`;