React组件渲染图片数组无报错却显示空div，求解决方法

嘿，我一眼就发现问题所在啦！你的map回调函数里没有返回<img>元素，这才导致渲染出空的<div>😯

问题分析 #

在你的代码中，map方法的回调用大括号包裹了内容，但你没有在<img>语句前加return关键字。箭头函数在使用大括号时不会自动返回内部的表达式，所以ratings数组里全是undefined，最终渲染出来自然就是空div了。另外，你原来的星级判断逻辑也有点问题，rating < i会导致星级显示反过来，需要调整一下。

修复后的代码 #

这里给你两种修复方式，选哪种都可以：

方式一：显式添加return

class StarRating extends React.Component {
  render() {
    const { rating } = this.props;
    const ratings = [...Array(5)].map((item, i) => {
      // 修正判断逻辑：i小于rating时显示填充的星星
      let src = i < rating ? "star-filled" : "star-unfilled";
      // 显式返回img元素
      return <img style={styles.image} src={require(`../../../../assets/${src}.png`)} alt={`Star ${i+1}`} />;
    });
    return <div style={styles.container}>{ratings}</div>;
  }
}

方式二：使用箭头函数隐式返回

如果想更简洁，可以去掉大括号，让箭头函数自动返回元素：

class StarRating extends React.Component {
  render() {
    const { rating } = this.props;
    const ratings = [...Array(5)].map((_, i) => (
      <img 
        style={styles.image} 
        src={require(`../../../../assets/${i < rating ? "star-filled" : "star-unfilled"}.png`)} 
        alt={`Star ${i+1}`} 
      />
    ));
    return <div style={styles.container}>{ratings}</div>;
  }
}

额外提示 #

别忘了给<img>加上alt属性哦，这不仅符合Web accessibility规范，也能在图片加载失败时显示替代文本。

内容的提问来源于stack exchange，提问作者Bomber