如何使用地图或循环使用 React JS 渲染图像？

Question

这是我的 js 文件，其中包含我的图像。

import React, { Component } from 'react';
import './Stopka.css';

class Stopka extends Component {
    render() {
        return (
            <div className="container">
                <footer className="row">
                    <div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <h4>Some text</h4>
                    </div>
                    <div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <img src={require("./icons/name1.png")} alt="" className="img-responsive" />
                        <img src={require("./icons/name2.png")} alt="" className="img-responsive" />
                        <img src={require("./icons/name3.png")} alt="" className="img-responsive" />
                        <img src={require("./icons/name4.png")} alt="" className="img-responsive" />
                    </div>
                </footer>
            </div>
        );
    }
}
export default Stopka;

以及渲染它的文件。

import React from 'react';
import ReactDOM from 'react-dom';
import Stopka from './Stopka';
import registerServiceWorker from './registerServiceWorker';



ReactDOM.render(<Stopka />, document.getElementById('stopka'));
registerServiceWorker();

现在我的图像并没有在优化模式下渲染，因为如果我想添加 20 个甚至更多，那会很痛苦。我想用循环或地图功能渲染它。尝试了一些，但它不起作用。你能解释一下我该怎么做吗？

这是我尝试过的。

import React, { Component } from 'react';
import './Stopka.css';

class Stopka extends Component {
    render() {
        let names = ['name1', 'name2', 'name3'];
        for (let i = 0; i < this.props.level; i++) {
            names.push(<image src={require("./icons/"+names+".png")} alt="" className="img-responsive" key={i} />  );
        }
        return (
            <div className="container">
                <footer className="row">
                    <div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <h4>Some text</h4>
                    </div>
                    <div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        {names}
                    </div>
                </footer>
            </div>
        );
    }
}


export default Stopka;

再试一次

import React, { Component } from 'react';
import './Stopka.css';

class Stopka extends Component {
    render() {
        let names = ['wood', 'sun'];

        let images = names.map(name => {

            <img
            src = {require("./icons/{name}.png")}
            alt = ""
                className="img-responsive" />
        });
        return (
            <div className="container">
                <footer className="row">
                    <div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <h4>some text</h4>
                    </div>
                    <div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        { images }

                    </div>
                </footer>
            </div>
        );
    }
}


export default Stopka;

但这会得到错误“找不到模块：无法解析'./icons/{name}.png'”

Answer 1

可以结合ES 6 template literals使用js的map函数。

class Stopka extends Component {
    render() {

        const array = ["wood", "lake", "sun", "moon", "sea"];

        const images = array.map(image => {
           return <img key={image} src={require(`./icons/${image}.png`)} className="img-responsive" />
        });

        return (
            <div className="container">
                <footer className="row">
                    <div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <h4>Some text</h4>
                    </div>
                    <div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                       { images }
                    </div>
                </footer>
            </div>
        );
    }
}
export default Stopka;

Answer 2

对于和我有同样问题的其他人。这也是工作示例。 我认为键索引更好，因为它不会在控制台中产生错误。 非常适合大型项目。

import React, { Component } from 'react';
import './Stopka.css';

class Stopka extends Component {
    render() {
        let names = ['wood', 'sun', 'moon', 'sea'].map( (name, index) => {
            return <img key={index} className="img-responsive" alt="" src={require(`./icons/${name}.png`)} />
        } );
        return (
            <div className="container">
                <footer className="row">
                    <div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <h4>some text</h4>
                    </div>
                    <div className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        { names }

                    </div>
                </footer>
            </div>
        );
    }
}


export default Stopka;

感谢 Paul Fitzgerald 的指导。