javascript - 无法更改图标图像(React)

Question

我不知道应该做什么才能使图像(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;

其他页面

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,
  }

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

Answer 1

您将其作为 props 传递给您的父级 likeIcon ={likes.like1}，它不会改变，因为它始终是静态的。您需要通过检查状态 this.state.likeIcon

确保传递正确的 like 值

在父组件的 render 方法中，您传递的 LikeIcon 始终设置为 likes.like1。

因此更改该 Prop 以反射(reflect)最新的图标:

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>
    );
}