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

向那些花时间和精力回答我前面问题的人表示最诚挚的歉意。我原本以为我不会得到帮助，所以我开始自己动手。我走得太远了，所以我不想从头开始重建我所做的

这个组件是一排星星。当用户单击一个星号时，它和以前的所有星号都从空变为满。如果点击星号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;

import React，{Component}来自“React”；
类Starset0扩展组件{
速率=事件=>{
const{id}=event.target；
log（“您单击：”+id）；
var i；
对于（i=1；i

问题是，星星不是变得饱满，而是停止渲染。它们将替换为“未找到图像”图标。为什么会这样？如果手动替换源属性，它将显示全星形

尝试更改此选项

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

到

---

外部化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;

import React，{Component}来自“React”；
类Starset0扩展组件{
const fullStarSrc=require（'./full-star.png'）；
const emptyStarSrc=require（'./empty star.png'）；
速率=事件=>{
const{id}=event.target；
log（“您单击：”+id）；
var i；
对于（i=1；我使用
state
。创建一个由5个布尔值组成的数组，最初，所有布尔值都设置为
false
。单击星号时，从单击星号的索引开始，返回到第一个项目，将值设置为
true
，然后设置state。现在，您可能还希望将此数组的每个项目与每个星号挂钩，以确定如果我这样做，它会调用变量“意外标记”。实际上，如果我在“class Starset0 extends Component”之前初始化变量，我可以让它在没有错误的情况下运行，但问题仍然是一样的。
  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;