这是我的 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/
我是AngularJS的新手，几天前才开始使用它，所以如果问题本身不正确，请原谅我。我遇到的问题是我想通过属性将URL参数传递到我的指令的隔离范围，但是在:部分http://它给我一个错误，说SyntaxError:Token':'isanunexpectedtokenatcolumn5oftheexpression[http://...指令的HTML部分(我“调用”它的地方)是这样的:<myDirectivedatasource="http://url"></myDirective>然后我像这样将它绑定(bind)(？)到隔离范围:scope:
如何将字符串人性化？基于以下标准:Deletesleadingunderscores,ifany.Replacesunderscoreswithspaces,ifany.Capitalizesthefirstword.例如:thisisatest->ThisisatestfooBarBaz->Foobarbazfoo_bar->Foobarfoo_bar_baz->Foobarbazfoo-bar->Foo-barfooBarBaz->FooBarBaz 最佳答案 最好确实使用一些正则表达式:^[
我见过的用于识别JavaScript版本的hack都是针对浏览器量身定制的，而不是运行JavaScript的ASPClassic服务器。(不，我没有选择运行ASPClassic/JavaScript。) 最佳答案 免责声明:我是MicrosoftJavaScript团队(特别是Chakra)的工程师。“经典ASP”使用的IActiveScriptJavaScript引擎也被Windows脚本宿主(cscript和wscript)使用，并且也被IE用过一段时间(IE9及以后肯定不行)。无论如何，JScript引擎通常与ECMAScri
在Node中使用Passport.js，有没有办法允许一个用户冒充另一个用户？例如。作为应用程序的管理员，我希望能够以另一个用户的身份登录，而不知道他们的密码。最简单的是，如果我可以更改序列化的用户数据(用户ID)，那么当deserializeUser被调用时，它只会假设备用用户的身份。我已经尝试替换req._passport.session.user的值和req.session.passport.user的值，但最终效果只是我的session似乎变得无效并且Passport将我注销。 最佳答案 Passport提供一个req.lo
我找到了这段代码:;100%function($){//WTF?var_true_=true;//WTF?var_false_=false;//WTF?vargo=function(location,date){location||(location={});varresult=_false_;if(date&&date.day){result=geoService.go(location,date);}return!!result;}varprocess=function(func){varargs=[].prototype.slice.call(arguments,
io.js的第一个版本这个月出来了，我正在阅读文档时发现smallocio.js中引入的新模块。直到今天，我从未觉得有必要在JavaScript中这样做。我的问题是:Iwonderifthereisreallyaneedofrawmemoryallocationinjavscriptusingsmalloc?Ifitsneededthenwhy?whatwouldbetheusecaseforusingsmalloc?andifnotthenwhydidio.jsmembersaddthismodule?它还说可以指定您想要的外部数组数据类型。smalloc.Types中列出了所有可能
我正在尝试ng-repeat嵌套对象属性并对它们进行排序，但排序对我不起作用。我看过这个:HowtoorderbyinAngularJSusingNestedproperty但是json结构不同，我无法让它工作。Plunker我的代码:<divng-repeat="itemindata|orderBy:order.allListPosition"><div>{{item.name}}-{{item.order}}</div></div>范围:$scope.data={"78962":{"id"
我是AngularJS的新手，如果这很明显，请原谅我，但我正在寻找可以回答这个棘手问题的人。我正在实现一个应用程序，需要将一些参数传递给特定View以显示有关书籍的详细信息。基本上我希望能够使用以下路由表达式:bookApp.config(['$routeProvider',function($routeProvider){$routeProvider.when('/catalog',{templateUrl:'cataloglist.htm',controller:'catCtrl'}).when('/book/
简要说明将测试服务器重置为已知状态会导致我的测试失败，因为DataTables实例启动的Ajax请求在服务器重置时正在进行。我想通过在重置服务器之前停止DataTables请求来防止这种情况。详细说明我有一个在某些页面上使用数据表的应用程序。这些数据表都执行服务器端查询来填充它们的表。当我执行系统测试时，有时会发生竞争条件:测试运行器启动测试服务器。测试运行器在测试浏览器中加载一个页面，其中某处有一个DataTable实例。测试运行器运行测试，执行检查并结束。测试运行器将测试服务器重置为下一个测试的已知状态。页面上出现一条警告，指出DataTables遇到了Ajax错误。警报说:Dat
我需要删除破折号以外的所有非数字字符。这是我的尝试(基于:Regextogetallalphanumericfieldsexceptforcomma,dashandsinglequote):varstripped=mystring.replace(/[-0-9]+/g,'');但这行不通:-( 最佳答案 我建议:varstripped=string.replace(/[^0-9\-]/g,'');JSFiddledemo.字符类中的^(在[和]中)是NOT运算符，因此它匹配的字符不是0-9或(转义的)
我是AngularJS的新手，几天前才开始使用它，所以如果问题本身不正确，请原谅我。我遇到的问题是我想通过属性将URL参数传递到我的指令的隔离范围，但是在:部分http://它给我一个错误，说SyntaxError:Token':'isanunexpectedtokenatcolumn5oftheexpression[http://...指令的HTML部分(我“调用”它的地方)是这样的:<myDirectivedatasource="http://url"></myDirective>然后我像这样将它绑定(bind)(？)到隔离范围:scope:
如何将字符串人性化？基于以下标准:Deletesleadingunderscores,ifany.Replacesunderscoreswithspaces,ifany.Capitalizesthefirstword.例如:thisisatest->ThisisatestfooBarBaz->Foobarbazfoo_bar->Foobarfoo_bar_baz->Foobarbazfoo-bar->Foo-barfooBarBaz->FooBarBaz 最佳答案 最好确实使用一些正则表达式:^[
我见过的用于识别JavaScript版本的hack都是针对浏览器量身定制的，而不是运行JavaScript的ASPClassic服务器。(不，我没有选择运行ASPClassic/JavaScript。) 最佳答案 免责声明:我是MicrosoftJavaScript团队(特别是Chakra)的工程师。“经典ASP”使用的IActiveScriptJavaScript引擎也被Windows脚本宿主(cscript和wscript)使用，并且也被IE用过一段时间(IE9及以后肯定不行)。无论如何，JScript引擎通常与ECMAScri
在Node中使用Passport.js，有没有办法允许一个用户冒充另一个用户？例如。作为应用程序的管理员，我希望能够以另一个用户的身份登录，而不知道他们的密码。最简单的是，如果我可以更改序列化的用户数据(用户ID)，那么当deserializeUser被调用时，它只会假设备用用户的身份。我已经尝试替换req._passport.session.user的值和req.session.passport.user的值，但最终效果只是我的session似乎变得无效并且Passport将我注销。 最佳答案 Passport提供一个req.lo
我找到了这段代码:;100%function($){//WTF?var_true_=true;//WTF?var_false_=false;//WTF?vargo=function(location,date){location||(location={});varresult=_false_;if(date&&date.day){result=geoService.go(location,date);}return!!result;}varprocess=function(func){varargs=[].prototype.slice.call(arguments,
io.js的第一个版本这个月出来了，我正在阅读文档时发现smallocio.js中引入的新模块。直到今天，我从未觉得有必要在JavaScript中这样做。我的问题是:Iwonderifthereisreallyaneedofrawmemoryallocationinjavscriptusingsmalloc?Ifitsneededthenwhy?whatwouldbetheusecaseforusingsmalloc?andifnotthenwhydidio.jsmembersaddthismodule?它还说可以指定您想要的外部数组数据类型。smalloc.Types中列出了所有可能
我正在尝试ng-repeat嵌套对象属性并对它们进行排序，但排序对我不起作用。我看过这个:HowtoorderbyinAngularJSusingNestedproperty但是json结构不同，我无法让它工作。Plunker我的代码:<divng-repeat="itemindata|orderBy:order.allListPosition"><div>{{item.name}}-{{item.order}}</div></div>范围:$scope.data={"78962":{"id"
我是AngularJS的新手，如果这很明显，请原谅我，但我正在寻找可以回答这个棘手问题的人。我正在实现一个应用程序，需要将一些参数传递给特定View以显示有关书籍的详细信息。基本上我希望能够使用以下路由表达式:bookApp.config(['$routeProvider',function($routeProvider){$routeProvider.when('/catalog',{templateUrl:'cataloglist.htm',controller:'catCtrl'}).when('/book/
简要说明将测试服务器重置为已知状态会导致我的测试失败，因为DataTables实例启动的Ajax请求在服务器重置时正在进行。我想通过在重置服务器之前停止DataTables请求来防止这种情况。详细说明我有一个在某些页面上使用数据表的应用程序。这些数据表都执行服务器端查询来填充它们的表。当我执行系统测试时，有时会发生竞争条件:测试运行器启动测试服务器。测试运行器在测试浏览器中加载一个页面，其中某处有一个DataTable实例。测试运行器运行测试，执行检查并结束。测试运行器将测试服务器重置为下一个测试的已知状态。页面上出现一条警告，指出DataTables遇到了Ajax错误。警报说:Dat
我需要删除破折号以外的所有非数字字符。这是我的尝试(基于:Regextogetallalphanumericfieldsexceptforcomma,dashandsinglequote):varstripped=mystring.replace(/[-0-9]+/g,'');但这行不通:-( 最佳答案 我建议:varstripped=string.replace(/[^0-9\-]/g,'');JSFiddledemo.字符类中的^(在[和]中)是NOT运算符，因此它匹配的字符不是0-9或(转义的)