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

解决方案 您可以将道具直接传递给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>
  );
}

对三元数的true分支使用正比较，并利用javascript的true / falsey值。如果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']};
  }
  ...
`;

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

1 个答案: