масштабировать и изменять цвет SVG при наведении в React

Question

У меня есть следующий пользовательский компонент Icon:

import React from 'react';
import PropTypes from 'prop-types';

const Icon = (props: any) => {
  const styles = {
    svg: {
      display: 'inline-block',
      verticalAlign: 'middle',
    },
    path: {
       fill: props.color,
    },
  };

  return (

    <svg

      style={styles.svg}
      width={`${props.size}px`}
      height={`${props.size}px`}
      viewBox="0 0 1024 1024"
    >
       <path style={styles.path} d={props.icon} /> 
    </svg>
  );


};

Icon.propTypes = {
  icon: PropTypes.string.isRequired,
  size: PropTypes.number,
  color: PropTypes.string

};

Icon.defaultProps = {
  size: 16
};

export default Icon

В другом компоненте я создаю его экземпляр со следующим утверждением:

<Icon
          icon={ICONS.TWITTER}
          color="#fff"
          size={30}
        />

Как изменить размер и цвет при наведении?Заранее спасибо!

Answer 1

Предполагая, что вы хотите решить эту проблему с помощью React, вам нужно настроить компонент, который визуализирует ваш компонент <Icon /> и настроить его свойства в зависимости от того, находится компонент <Icon /> или нет.

Это означает, что родительский компонент должен перейти в состояние и компоненту <Icon /> необходимо реализовать своего рода обратный вызов, когда мышь входит и покидает его. Для этого вы можете использовать функции onMouseEnter и onMouseLeave ( см. Также документы ). Затем они просто установят логический флаг в состоянии родительского компонента, и на этом основании реквизит будет изменен.

Реализация может выглядеть следующим образом:

<Icon
  icon={ICONS.TWITTER}
  color={this.state.isHovered ? '#333' : '#fff'}
  size={this.state.isHovered ? 40 : 30}
  onMouseEnter={this.handleMouseEnter}
  onMouseLeave={this.handleMouseLeave}
/>

Где handleMouseEnter() может выглядеть так:

handleMouseEnter = () => {
  this.setState({ isHovered: true })
}

и handleMouseLeave() просто сделали бы обратное.

Обратите внимание, что , это большая работа по реализации того, что браузеры уже сделали для вас (состояние :hover в CSS), поэтому стоит подумать, нужен ли вам эффект такой же динамичной, как сейчас, или если бы вы могли просто жить с фиксированным увеличением размера и смены цвета.
Кроме того, onMouseEnter и onMouseLeave могут вызвать некоторые проблемы с сенсорными устройствами.