0

我有这个函数组件用于将跨度呈现为条形。当我渲染组件时，我将道具传递scrolled为false. true然后，当我滚动 150 像素时，jQuery 将属性更新为。我知道使用 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};
  }
  ...
`;

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

4

1 回答 1

2

问题 您的代码会记住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']};
  }
  ...
`;
于 2020-01-11T08:03:23.710 回答