Javascript 无法更改图标图像（反应）

我不知道每次单击按钮时应该如何修改图像（favorite.svg和favorite white.sgv）。我更努力了，这很难。我使用React

每次单击按钮时，我都希望图像从favorite-white.sgv更改为favorite.sgv（以及从favorite.sgv更改为favorite white.sgv）。我不知道该怎么办，或者我做错了什么

import React from 'react';
import logo from './logo.svg';
import './App.css'
import { InstaF4 } from './componentes/card.js';

const usuario = {
  imagemUser: require ('./componentes/img1.jpg'),
  userName: "Caroline"
}

const fotoPrincipal= {
  fotoPrincipal: 'https://picsum.photos/350/290?'
}

const likes = {
  like1: require ('./componentes/icones/favorite-white.svg'),
  like2:require ('./componentes/icones/favorite.svg'),
  comment: require ('./componentes/icones/comment_icon.svg'),
}


class App extends React.Component{
  constructor(props){
      super(props);
      this.state = {
      likeIcon: false,
      };
  }  

botaoCurtido = () =>{
  const semLike = this.state.likeIcon;
  this.setState ({likeIcon : !this.state.likeIcon})
};

/*botaoCurtido = () =>{
  const curtida = likes.like2
  this.setState ({likeIcon : curtida})
  //console.log ("testei")
};*/

render() {
  let likeIcon="";
  const curtida = likes.like2
  //let iconeCurtido = require ('./componentes/icones/favorite.svg');

  if(this.state.likeIcon === true){
    likeIcon = curtida
    console.log ("testeiiii")
    }

  return (
  <div className="dados">
    <InstaF4
    imagemUser={usuario.imagemUser}
    userName = {usuario.userName}

    fotoPrincipal={fotoPrincipal.fotoPrincipal}

    likeIcon = {likes.like1}
    likeIconLiked = {likes.like2}
    commentIcon = {likes.comment}
    curtida = {this.botaoCurtido}

    />

{likeIcon}
  </div>
   ) 
}

}


export default App;

从“React”导入React；
从“/logo.svg”导入徽标；
导入“./App.css”
从“./components/card.js”导入{InstaF4}；
惯常分子={
imagemUser:require（'./components/img1.jpg'），
用户名：“卡罗琳”
}
常数fotoPrincipal={
fotoPrincipal:'https://picsum.photos/350/290?'
}
const likes={
如1:require（“./components/icones/favorite white.svg”），
如2:require（“./components/icones/favorite.svg”），
注释：要求（'./components/icones/comment_icon.svg'），
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
likeIcon：错，
};
}  
botaoCurtido=（）=>{
const semLike=this.state.likeIcon；
this.setState（{likeIcon:！this.state.likeIcon}）
};
/*botaoCurtido=（）=>{
const curtida=likes.like2
this.setState（{likeIcon:curtida}）
//console.log（“testei”）
};*/
render（）{
让likeIcon=“”；
const curtida=likes.like2
//让iconeCurtido=require（'./components/icones/favorite.svg'）；
if（this.state.likeIcon==true）{
likeIcon=curtida
console.log（“testeiii”）
}
返回(
{likeIcon}
) 
}
}
导出默认应用程序；

其他页面

import React from 'react';
import './card.css';
import PropTypes from 'prop-types';


export function InstaF4(props){
return (
        <div className="feed">

            <div className="usuario">
                <img src={props.imagemUser} alt="" className="imgUser"/>
                <p>{props.userName}</p>
            </div>
            <div className="foto">
                <img src = {props.fotoPrincipal} alt="" className="fotoPrincipal"/>
            </div>
            <div className="likes">
                <img src = {props.likeIcon} alt="" className="likewhite" onClick={props.curtida} />
                <img src = {props.commentIcon} alt="" className="iconeComentario"/>


            </div>
        </div>
    )
}

InstaF4.propTypes = {
    imagemUser: PropTypes.string.isRequired,
    userName: PropTypes.string.isRequired,
    fotoPrincipal: PropTypes.string.isRequired,
    likeIcon: PropTypes.string.isRequired,
    commentIcon: PropTypes.string.isRequired,
    curtida:PropTypes.func.isRequired,
  }

从“React”导入React；
导入“./card.css”；
从“道具类型”导入道具类型；
导出功能InstaF4（道具）{
返回(
{props.userName}

)
}
InstaF4.propTypes={
imagemUser:PropTypes.string.isRequired，
用户名：PropTypes.string.isRequired，
fotoPrincipal:PropTypes.string.isRequired，
likeIcon:PropTypes.string.isRequired，
commentIcon:PropTypes.string.isRequired，
curtida:PropTypes.func.isRequired，
}

---

我点击了按钮，函数被调用，但是图像没有改变。

你把它作为道具从你的父母那里传给你的

likeIcon={likes.like1}

，它不会改变，因为它总是静态的。您需要通过检查state

this.state.likeIcon

在父组件的渲染方法中，传递的是始终设置为

likes.like1

的LikeIcon

因此，更改道具以反映最新图标：

likeIcon={this.state.likeIcon ? likes.like2 : likes.like1}

见下文：

render() {
    return (
      <div className="dados">
        <InstaF4
          imagemUser={usuario.imagemUser}
          userName={usuario.userName}
          fotoPrincipal={fotoPrincipal.fotoPrincipal}

          // This should set the likeIcon as per the boolean variable
          likeIcon={this.state.likeIcon ? likes.like2 : likes.like1}

          commentIcon={likes.comment}
          curtida={this.botaoCurtido} />
      </div>
    );
}

render（）{
返回(
);
}

从“/TestImage.svg”使用导入{ReactComponent as TestImage}导入svg文件您知道代码是否有问题吗？图像已导入，但不会随onClick事件而更改。请在InstaF4中创建一个状态，可能名为“IsLiked”，并分配props.likeIcon。换衣服，我以后再试试，谢谢！使用逻辑定义“toggleLike”函数以切换“IsLiked”状态嘿！！非常感谢。很多，我会很快测试它！我就是不懂“？”这里的likeIcon={this.state.likeIcon？likes.like2:likes.like1}