时间戳

首页 > 解决方案 > 在渲染中显示数组映射

reactjs - 在渲染中显示数组映射

问题描述

尝试在我的组件中显示一组图像，我没有收到任何错误，只是一个空的 div：

class StarRating extends React.Component {
    render() {
        const { rating } = this.props;

        const ratings = [...Array(5)].map((item, i) => {
            let src = rating < i ? "star-filled" : "star-unfilled";
            <img
                style={styles.image}
                src={require(`../../../../assets/${src}.png`)}
            />;
        });

        return <div style={styles.container}>{ratings}</div>;
    }
}

如何显示我的图像？

标签： reactjs

解决方案

您缺少评级声明中的回报。如果您{}在内部使用，则map需要声明退货。

const ratings = [...Array(5)].map((item, i) => {
            let src = rating < i ? "star-filled" : "star-unfilled";
            return <img // add return
                style={styles.image}
                src={require(`../../../../assets/${src}.png`)}
            />;
        });

编辑. 添加了不带返回的选项：

const ratings = [...Array(5)].map((item, i) => 
            <img
                style={styles.image}
                src={require(`../../../../assets/${rating < i ? "star-filled" : "star-unfilled"}.png`)}
            />
        );

推荐阅读