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

IT技术 javascript reactjs
2021-05-22 04:59:39

这是我的 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;

但这会出现错误“找不到module：无法解析'./icons/{name}.png'”

2个回答

您可以将 jsmap函数与ES 6 模板文字结合使用。

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;

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

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;

感谢保罗·菲茨杰拉德的指导。

其它你可能感兴趣的问题
上一篇可以将 setState 函数的 prevState 参数视​​为可变的吗？ 下一篇M3D 灯丝不能很好地挤出（不再）