Масштабировать и изменять цвет svg при наведении в React
У меня есть следующий пользовательский компонент 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}
/>
Как я могу изменить размер и цвет при наведении? Заранее спасибо!
желательно с css
Ответы 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 могут вызвать некоторые проблемы с сенсорными устройствами.
Вы хотите сделать это в Javascript или с помощью CSS?