javascript - 在从 React Icons 导入的 Icons 上使用 useRef

Question

我只是想将 Ref 设置为导入的 React 图标。但由于某种原因，它不起作用。我收到以下错误消息：

“TypeError：无法读取未定义的属性（读取'样式'）”

有没有一种特殊的方法来引用导入的文件？

import React from 'react'
import { useRef } from 'react'


import {HiPlus, HiThumbDown, HiThumbUp, HiArrowNarrowRight} from "react-icons/hi"

function Card(props) {

    var addToFavRef = useRef()
    var thumbUpRef = useRef()
    var thumbDownRef = useRef()

function addToFavorites(){

        addToFavRef.current.style.color = "orange"
        addToFavRef.current.style.transform = "rotate(45deg)"
}
    
function thumbUp(){
        thumbDownRef.current.style.color = "grey"
        thumbDownRef.current.style.opacity = "50%"
}

return (
<>
  <HiPlus className="cardPlusIcon" ref={addToFavRef}></HiPlus>
  <HiThumbUp className="cardThumbUp" ref={thumbUpRef} onClick={thumbUp}></HiThumbUp>
  <HiThumbDown className="cardThumbDown" ref={thumbDownRef} onClick={thumpDown}></HiThumbDown>
</>
  )
}

export default Card

这是消息：

标签： javascriptreactjs

Answer 1

我不相信反应图标svg附加了参考。如果您使用打字稿，您可以在尝试添加时看到错误。

如果您确实必须访问 dom 节点，那么您可以将每个图标包装在 div 或 span 中并附加一个 ref ，然后您可以通过子节点访问它，例如ref.current.childNodes[0]

但是，如果您要设置样式只是设置它，那么在您的情况下这样做是没有意义的。这里没有理由访问 dom 节点。您可以通过添加类或直接设置样式来实现。

import {HiPlus, HiThumbDown, HiThumbUp, HiArrowNarrowRight} from "react-icons/hi"
import {useState} from 'react'

const thumbsUpStyle = {
  color: 'orange',
  transform: 'rotate(45deg)'
}

const thumbsDownStyle = {
  color: 'orange',
  transform: 'rotate(-45deg)'
}

const favoritesStyle = {
  color: 'grey',
  opacity: '50%'
}

export default function Card() {
  const [thumbs, setThumbs] = useState('')
  const [favorites, setFavorites] = useState(false)

  return (
    <div className="card">
      <HiPlus onClick={() => setFavorites(true)} style={favorites && favoritesStyle}/>
      <HiThumbUp onClick={() => setThumbs('up')} style={thumbs === 'up' && thumbsUpStyle}/>
      <HiThumbDown  onClick={() => setThumbs('down')} style={thumbs === 'down' && thumbsDownStyle}/>
    </div>
  );
}

或者只是在样式表中添加一个相应的类和该类的样式

import {HiPlus, HiThumbDown, HiThumbUp, HiArrowNarrowRight} from "react-icons/hi"
import {useState} from 'react'

export default function Card() {
  const [thumbs, setThumbs] = useState('')
  const [favorites, setFavorites] = useState(false)

  return (
    <div className="card">
      <HiPlus onClick={() => setFavorites(true)} className={favorites && 'favorites-class'}/>
      <HiThumbUp onClick={() => setThumbs('up')} className={thumbs === 'up' && 'thumbs-up-class'}/>
      <HiThumbDown  onClick={() => setThumbs('down')} className={thumbs === 'down' && 'thumbs-down-class'}/>
    </div>
  );
}