TOGOUTECH

javascript - 如何使用映射或循环使用 React JS 渲染图像?

coder 2024-05-16 原文

这是我的 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 个或更多,那将是非常痛苦的。我想用循环或 map 功能渲染它。尝试了一些但它不起作用。你能解释一下我该怎么做吗?

这是我试过的。

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'”

最佳答案

您可以使用 js map功能结合 ES 6 template literals .

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;

关于javascript - 如何使用映射或循环使用 React JS 渲染图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45713362/

有关javascript - 如何使用映射或循环使用 React JS 渲染图像?的更多相关文章

  1. c# - 使用 LINQ 查找具有特定属性名称和值的 XElement - 2

    XDocumentxDocument=XDocument.Load("...");IEnumerable<XElement>elements=xDocument.Element("lfm").Element("events").Elements("event");try{foreach(XElementelminelements){comm.Parameters.AddWithValue("extID",elm.Element("id").Value??"");c

  2. c# - 如何将图像流嵌入到 MailMessage - 2

    我在将Properties.Resources中的图像嵌入到MailMessage时遇到了一些困难,目前该图像未显示在我收到的电子邮件中。我已经成功地从目录位置嵌入了图像,但如果图像来自内存/应用程序,我会更喜欢。这是我正在做的事情的简化版本。Bitmapb=newBitmap(Properties.Resources.companyLogo);MemoryStreamlogo=newMemoryStream();b.Save(logo,ImageFormat.Jpeg);MailMessagenewEmail=newMailMessage(from,to);newEmail.Subj

  3. c# - 从 URL 到流的图像 - 2

    我从url获取图片:BitmapImageimage=newBitmapImage(newUri(article.ImageURL));NLBI.Thumbnail.Source=image;这很完美,现在我需要将它放入流中,使其成为字节数组。我这样做:WriteableBitmapwb=newWriteableBitmap(image);MemoryStreamms=newMemoryStream();wb.SaveJpeg(ms,image.PixelWidth,image.PixelHeight,0,100);byte[]imageBytes=ms.ToArray();代码因Nu

  4. c# - 将图像添加到 asp.net 中的链接按钮 - 2

    <asp:GridViewID="Grid_Organisationtable"runat="server"CssClass="string"SelectedIndex="0"DataKeyNames="OrganisationID"ShowHeaderWhenEmpty="True"OnRowDeleting="Grid_Organisationtable_RowDeleting"OnRowEditing="Grid_Organisationtable_Row

  5. c# - 为什么应该使用 C# 预定义类型而不是系统命名空间中的别名 - 2

    在JuvalLowy的“C#编码标准”中,可从www.idesign.net获得,建议使用C#预定义类型而不是System命名空间中的别名,例如:object不是Objectstring不是Stringint不是Int32这样做有什么好处?它们有何不同?我在自己的编码中遵循了这个建议,但不知道它们有何不同。 最佳答案 它们意外不同的主要时间是当某人愚蠢到调用类型(或属性/字段/等)String(例如)时,因为string始终指的是global::System.String,其中String可能是YourNamespace.Strin

  6. c# - 如何使用正则表达式删除括号中的文本 - 2

    我正在寻找一个将执行以下操作的正则表达式:INPUT:UserName([email protected])OUTPUT:UserName实现此目标的最佳方法是什么?使用正则表达式提取括号内的文本并替换它和任何)(字符? 最佳答案 这应该可以完成工作:varinput="UserName([email protected])";varoutput=Regex.Replace(input,@"?\(.*?\)",string.Empty);注意(和)字符的转义,这样它们就不会被识别为组标记。

  7. c# - 内存映射文件 .NET - 2

    我有一个项目,它需要访问ASP.NET中的大量专有数据。这是通过在共享内存中加载数据在Linux/PHP上完成的。我想知道尝试使用内存映射文件是否可行,或者是否有更好的方法支持更好的.NET。我正在考虑使用数据缓存,但不确定缓存中保存的数据大小的所有缺陷。 最佳答案 我知道这有点晚了,但是.NET4.0框架现在支持开箱即用的内存映射文件:http://blogs.msdn.com/salvapatuel/archive/2009/06/08/working-with-memory-mapped-files-in-net-4.aspx

  8. c# - 当我们使用时线程被中止 - 2

    我收到以下异常:System.Threading.ThreadAbortException:Threadwasbeingaborted.atSystem.Threading.Thread.AbortInternal()atSystem.Threading.Thread.Abort(ObjectstateInfo)atSystem.Web.HttpResponse.End()atSystem.Web.HttpResponse.Redirect(Stringurl,BooleanendResponse)atSystem.Web.HttpResponse.Redirect(Stringurl

  9. c# - 以线程安全的方式添加到 Parallel.ForEach 循环中的列表 - 2

    我有一些代码在名为ListofObjects的obj对象列表上像这样工作:List<SomeObject>NewListofObjects<SomeObject>();Parallel.ForEach(ListofObjects,obj=>//DosomeoperationshereonobjtogetanewobjNewListofObjects.Add(newobj););现在我退出了Parallel.ForEach循环,我想对NewListofObjects进行操作。但是,当我尝试执行以下操作时出现此错误:“尝试读取或写入protected内存。这通

  10. c# - 如何使用 EF 4.x DbContext 生成器获取属性更改通知 - 2

    我正在使用EntityFramework4.3,因此我使用DbContextGenerator来创建上下文和实体类。使用默认的EF4代码生成器模板,实体类实现INotifyPropertyChanged,并在属性setter中添加Changing和Changed分部方法。当我使用EF4.xDbContext生成器时,如下图所示,实体类要轻得多,并且不包括任何跟踪属性更改的方法。这是一个例子://------------------------------------------------------------------------------//<auto-generate

随机推荐

  1. c# - 是否有 .NET 方法来枚举所有可用的网络打印机? - 2

    是否有直接的方法来枚举.NET中所有可见的网络打印机?目前,我正在展示PrintDialog以允许用户选择打印机。问题在于,本地打印机也会显示(以及XPSDocumentWriter等)。如果我可以自己枚举网络打印机,我可以显示一个仅包含这些打印机的自定义对话框。谢谢!! 最佳答案 从LocalPrintServer.DefaultPrintQueue获取默认打印机从PrinterSettings.InstalledPrinters获取已安装的打印机(从用户的角度来看)枚举列表:任何以\\开头的打印机都是网络打印机-所以使用newP

  2. c# - C# 最小化所有打开的窗口 - 2

    我在论坛上看到这个C++代码,它最小化了所有打开的窗口#defineMIN_ALL419#defineMIN_ALL_UNDO416intmain(intargc,char*argv[]){HWNDlHwnd=FindWindow("Shell_TrayWnd",NULL);SendMessage(lHwnd,WM_COMMAND,MIN_ALL,0);Sleep(2000);SendMessage(lHwnd,WM_COMMAND,MIN_ALL_UNDO,0);return0;}如何在C#.net中访问FindWindow和SendMessageAPI函数以及HWN

  3. c# - 在 C# 下,try、throw 和 catch block 对性能的影响有多大 - 2

    首先声明:我有使用其他语言的经验,但仍在学习C#的精妙之处关于问题...我正在查看一些代码,它以我关心的方式使用try/catchblock。当调用解析例程时,程序员没有返回错误代码,而是使用了以下逻辑catch(TclExceptione){thrownewTclRuntimeError("unexpectedTclException:"+e.Message,e);}这被调用者捕获,抛出相同的错误......被调用者捕获,抛出相同的错误........被调用者捕获,抛出相同的错误......备份大约6个级别。我是否认为所有这些catch/throwblock都导致了性

  4. c# - 将 ICollection<T> 转换为 List<T> - 2

    我正在尝试使用以下代码将ICollection转换为List-ICollection<DataStructure>list_Stuctures=dataConnectorService.ListStructures(dataConnector,SupportedDataStructures.All);List<DataStructure>lst_DataStructure=newList<DataStructure>();list_Stuctures.CopyTo(lst_DataStructure);在最后一行,我得到以下异常-Exception=

  5. c# - WPF 在第二个窗口打开时禁用主窗口,直到它关闭 - 2

    我有一个WPF应用程序,它有一个主窗口和一个可以从主窗口中的按钮打开的第二个窗口。我希望主窗口被禁用,而第二个窗口在VisualStudio中作为“关于”窗口打开。 最佳答案 试试这个ShowDialogmethod而不是Show将第二个窗口作为对话框打开。您有一个已经带有窗口的WPF项目。这个应用应该可以运行。右键单击项目并添加新窗口。您将其命名为Window1.xaml您现在会注意到Window1.xaml和Window1.xaml.cs添加到您的项目中。(窗口的类名是Window1,它位于.xaml.cs文件中,它派生自Win

  6. c# - ASP.NET Gridview 中没有时间的日期格式 - 2

    在ASP.NETgridview中绑定(bind)两个日期。我想显示dd/MM/yyyy但它显示10/03/201400:00:00。<asp:TemplateFieldHeaderText="Fromdate"><ItemTemplate><asp:LabelID="lblFromDate"runat="server"DataFormatString="{0:dd/MM/yyyy}"HtmlEncode="false"Text='<%#Eval("Fro

  7. c# - 如何在 C# 中使用正则表达式解析 OData $filter? - 2

    您好,我想知道在C#中解析OData$filter字符串的最佳方法是什么,例如/API/organisations?$filter="nameeq'Facebook'ornameeq'Twitter'andsubscribersgt'30'"应返回名称为Facebook或Twitter且拥有超过30个订阅者的所有组织。我已经研究了很多但找不到任何不围绕WCF的解决方案。我正在考虑使用Regex并将它们分组,所以我有一个列表过滤器类使得:FilterResource:NameOperator:EqValue:FacebookFilterResource:NameOperator:EqVa

  8. c# - 序列化json时如何忽略JsonProperty(PropertyName = "someName")? - 2

    我有一些使用ASP.NetMVC的C#代码,它使用Json.Net来序列化一些DTO。为了减少负载,我使用[JsonProperty(PropertyName="shortName")]属性在序列化期间使用较短的属性名称。当客户端是另一个.Net应用程序或服务时,这非常有效,因为反序列化将对象层次结构重新组合在一起,使用更长更友好的名称,同时保持较低的实际传输负载。当客户端通过浏览器使用javascript/ajax时,问题就出现了。它发出请求,并获取json...但json使用的是缩短的不太友好的名称。如何让json.net序列化引擎以编程方式忽略[JsonProperty(Prop

  9. c# - Rfc2898/PBKDF2 与 SHA256 作为 c# 中的摘要 - 2

    我想在C#中使用Rfc2898来导出key。我还需要使用SHA256作为Rfc2898的摘要。我找到了Rfc2898DeriveBytes类,但它使用SHA-1,而且我看不出有什么方法可以让它使用不同的摘要。有没有办法在C#中使用Rfc2898并将SHA256作为摘要(除了从头开始实现)? 最佳答案 .NETCore有一个新的Rfc2898DeriveBytes实现。CoreFXversionnolongerhasthethehashingalgorithmhard-codedThecodeisavailableonGithub.它

  10. c# - 具有领域驱动设计的存储库模式会成为反模式吗? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭9年前。社区在4个月前审查了是否重新打开此问题,然后将其关闭:原始关闭原因未解决Improvethisquestion首先,我想澄清一下,我是领域驱动设计的新手,我问这个问题是因为我读过一些叫做贫血领域模型的东西。大多数时候我在使用Repository模式时会看到以下内容。我们有一个通用存储库我们的模型只包含一组公共(public)属性,但不包含任何方法(因此根据DDD的定义,它变成了贫血领域模型),因为这里的存储库类处理该实体或模型