reactjs - 在 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 /> 的组件。组件并设置它的 Prop 是否知道 <Icon />组件是否悬停。

这意味着父组件必须变为有状态并且 <Icon />组件需要在鼠标进入和离开时实现某种回调。为此，您可以使用 onMouseEnter和 onMouseLeave函数 ( see the docs as well )。然后这些只会在父组件的状态中设置一个 bool 标志，并且基于此， Prop 会发生变化。

实现可能如下所示:

<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()只会做相反的事情。

请注意 ，这是很多工作来实现浏览器已经为你做的事情(CSS 中的 :hover 状态)，所以值得考虑是否需要效果像现在一样动态，或者如果你可以只是大小和颜色变化固定增加。
另外， onMouseEnter和 onMouseLeave可能会导致触摸设备出现一些问题。