在 React 中悬停时缩放和更改 svg 的颜色

Question

我有以下自定义图标组件：

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 />组件的组件和设置它的 props 知道<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()只会做相反的事情。

但是请注意，要实现浏览器已经为您做的事情（:hoverCSS 中的状态）需要做很多工作，因此值得考虑的是，您是否需要像现在一样动态的效果，或者您是否可以大小和颜色变化固定增加。
此外，onMouseEnter并onMouseLeave可能会导致触摸设备的一些问题。