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 />组件的组件，并设置其道具以了解<Icon />组件是否悬停。

这意味着父组件必须变为有状态的，并且<Icon />组件需要在鼠标进入和离开鼠标时实现某种回调。为此，您可以使用onMouseEnter和onMouseLeave函数（see the docs as well）。然后，只需在父组件的状态中设置一个布尔标志，并根据此标志更改道具。

一个实现可能看起来像这样：

<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可能会导致触摸设备出现某些问题。

在React中缩放并更改svg的颜色

1 个答案: