Обновление функциональных компонентов не меняет стиля

Question

У меня есть этот компонент функции для рендеринга диапазона в виде бара. Когда я рендерил компонент, я передаю реквизит scrolled как false. Затем jQuery обновляет атрибут до true, когда я прокручиваю 150 пикселей. Я знаю, что не стоит использовать 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>
  );
}

Используйте положительное сравнение для истинной ветви троичного и используйте значения truey / falsey 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']};
  }
  ...
`;