反应星级评分功能：图像不显示

Question

向那些花费时间和精力回答我之前的问题的人致以诚挚的歉意。我最初认为我不会得到帮助，所以我开始自己研究它。我已经走了很远，所以我宁愿不从头开始重建我所做的事情。

这个反应组件是一排星星。当用户点击一个星星时，它和之前所有的星星都会从空变成满。如果单击星号 2，星号 1 和星号 2 都会变满，等等。这几乎可以工作。这是我的代码：

import React, { Component } from "react";

class Starset0 extends Component {



rate = event => {
    const {id} = event.target;

    console.log("You clicked: " + id);
    var i;

    for (i = 1; i < parseFloat(id) + 1; i++) { 
console.log("I should change the following: " + i);
document.getElementById(i).setAttribute("src", "{require('./full-star.png')}"); 

//okay, so you've...kinda got it working...kind of

}

  };

  render() {
    return (

        <div id = "rating0">
<img onClick = {this.rate} class = "star" id = "1" src = {require('./empty-star.png')} />
<img onClick = {this.rate} class = "star" id = "2" src = {require('./empty-star.png')} />
<img onClick = {this.rate} class = "star" id = "3" src = {require('./empty-star.png')} />
<img onClick = {this.rate} class = "star" id = "4" src = {require('./empty-star.png')}/>
<img onClick = {this.rate} class = "star" id = "5" src = {require('./empty-star.png')}/>

</div>

      );
  }
}

export default Starset0;

问题是，星星并没有变满，它们只是停止渲染。它们被替换为该图像未找到图标。为什么是这样？如果我手动替换源属性，它会显示满星。

Answer 1

尝试改变这个

"{require('./full-star.png')}"

到

{require('./full-star.png')}



"{require('./full-star.png')}" is executed as string. so its not fetching the image.

Answer 2

外部化 require 语句并将其用作变量。

试试这个

  import React, { Component } from "react";

  class Starset0 extends Component {

    const fullStarSrc = require('./full-star.png');
    const emptyStarSrc = require('./empty-star.png');

    rate = event => {
      const { id } = event.target;

      console.log("You clicked: " + id);
      var i;

      for (i = 1; i <= 5; i++) {
        if(i <= parseInt(id)) {
          console.log("I should change the following: " + i);
          document.getElementById(i).setAttribute("src", 
  fullStarSrc);
        }
        else {
          console.log("I should change the following: " + i);
        document.getElementById(i).setAttribute("src", 
  emptyStarSrc);
        }


        //okay, so you've...kinda got it working...kind of

      }

    };

    render() {
      return (

        <div id="rating0">
          <img onClick={this.rate} class="star" id="1" src= 
 {emptyStarSrc} />
          <img onClick={this.rate} class="star" id="2" src= 
 {emptyStarSrc} />
          <img onClick={this.rate} class="star" id="3" src= 
 {emptyStarSrc} />
          <img onClick={this.rate} class="star" id="4" src= 
 {emptyStarSrc} />
          <img onClick={this.rate} class="star" id="5" src= 
 {this.emptyStarSrc} />

        </div>

      );
    }
  }

  export default Starset0;