根据“喜欢”状态更改 SVG 图标颜色

Question

我的 React/TypeScript 应用程序中有一个 Upvote 组件，它允许用户对帖子进行投票，或删除他们的投票。 upvote 本身是react-icons 包中的一个图标，特别是来自 Grommet-Icons 部分。当用户通过点击图标对帖子进行投票时，我会像这样动态更改图标的填充：

e.target.querySelector("path").setAttribute("fill", "green");

e.target 是一个 SVG 元素。在那个元素中，我使用querySelector 来找到它的path 子元素。在path 孩子上，我将其“填充”属性设置为绿色。

这很好用，但我想扩展它。当我呈现每个帖子时，我会检查登录的用户是否已经投票支持该特定帖子。我想根据用户是否已经对帖子进行投票的布尔结果来更改图标的颜色，这样图标就可以是绿色的，并且用户会看到他们已经对帖子进行了投票。我的问题是如何在没有e.target- 的情况下访问该“填充”属性，因为页面加载时用户没有点击任何内容。我想我的问题非常具体到 react-icons 包的使用，因为当我向返回函数添加图标时，它被包装组件包装，所以我无法访问 path 元素（在这种情况下组件是GrSign)。

这是上下文的 Upvote 组件：

import React, { useEffect, useState } from "react";
import { GrSign } from "react-icons/gr";
import { useSelector } from "react-redux";
import { InitialState } from "../store/reducers/rootReducer";

export const Upvote = (props: any) => {

const userState = useSelector((state: InitialState) => {
    return state.auth;
  });

const [upvoted, setUpvoted] = useState(false);

  useEffect(() => {
    if (userState && userState.user !== undefined) {
      const userId = userState.user.user._id;
      if (props.upvotes.indexOf(userId) > -1) {
        // The user already upvoted this post
        setUpvoted(true);
      }
    }

    if (upvoted) {
        
    }
  }, []);

const handleClick = (e: any) => {
    console.log(e.target);
    e.target.querySelector("path").setAttribute("fill", "red");
  };
 
  return (
    <div className="flex items-center">
      <GrSign
        size="2em"
        className="transform transition duration-300 hover:scale-125"
        onClick={handleClick}
      />
      <div className="pl-2 text-lg">{props.upvotes.length}</div>
    </div>
  );
};

在useEffect 函数中，我想添加一行，如果upvoted === true 会改变图标的​​颜色。

以防万一，这就是我在 handleClick 函数中写入 console.log(e.target) 时打印到控制台的内容：

<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="transform transition duration-300 hover:scale-125" height="2em" width="2em" xmlns="http://www.w3.org/2000/svg"><path fill="red" stroke="#000" stroke-width="2" d="M8,23 C10,23 12.9996892,23 15,23 C18,23 19,21 19,18 L19,6 C19,4.00000008 18,3.99999992 17.5,4 C17,4.00000008 15.9998779,4.00000008 15.9998779,5.99999984 L15.9998779,13 C15.9998777,12 16.0001888,10.9999999 14.5003109,10.9999999 C13.000433,10.9999999 13,13 13,13 C13,12 13,11 11.5,10.9999999 C10,10.9999999 10,12 10,12.9999999 L10,4 C10,3 10.029402,2 8.5,2 C7,2 7,3 7,4 L7,18 L7,14 C7,13 6.44999986,12 5.00000005,12 C5,12 4,12 4,12 C4,12 4.00000001,14.0384045 4,18 C3.99999999,21.9615955 6,23.023861 8,23 Z"></path></svg>

Answer 1

您可以为图标容器创建ref。还添加一个新的useEffect 块，每次upvoted 属性更改时都会执行该块：

export const Upvote = (props: any) => {
      //...
      const [upvoted, setUpvoted] = useState(false);
      const iconRef = useRef(null);
    
      useEffect(() => {
        if (userState && userState.user !== undefined) {
          const userId = userState.user.user._id;
          if (props.upvotes.indexOf(userId) > -1) {
            // The user already upvoted this post
            setUpvoted(true);
          }
        }
      }, []);
    
      useEffect(() => {
        if (upvoted) {
             iconRef.current.querySelector("svg path").setAttribute("fill", "red")
        }
      }, [upvoted]);
    
      const handleClick = e => {
        //...
      };
      return (
        <div className="flex items-center" ref={iconRef}>
          <GrSign
            size="2em"
            className="transform transition duration-300 hover:scale-125"
            onClick={handleClick}
          />
          <div className="pl-2 text-lg">{upvotes.length}</div>
        </div>
      );
    }