如何在react.js 中利用for循环之类的输出html

Question

如题所述

Answer 1

　　在react中，可以用遍历直接循环输出。react使用的是es6语法，建议先学习es6然后再使用react。

　　以下是遍历添加option，然后下面就可以直接读取了。其中stationData是map数据，station是当前循环遍历的单条数据。

let Options = stationData.map(station => <Option key={station.SiteUid}>{station.SiteName}</Option>);

　　以下是react return的界面，使用Option替代需要输出的代码

<Select size="default" >
    {Options}
</Select>

　　最后贴上map数据，就是用于遍历的数据。

let stationData={
    {SiteUid:"1",SiteName:"站点一"}，
    {SiteUid:"2",SiteName:"站点二"}
}

　　 

Answer 2

在jsx中使用collection.map就好

可以在component内部定义一个或者外部传入一个mapper函数

constmapper=(item)=>{return(

<MyItem>{item.name}</MyItem>

)}

然后在render的jsx中

{collection.map(mapper)}

才发现fb

如何在 React 中运用 CSS？

建议 CSS in JS 写法，虽然感觉推翻了多年的 CSS 工作进展。主要原因还是 CSS 的全局污染。模块化、组件化一直是前端不断优化追求的目标。传统的 CSS 无法很好的进行模块化。只能人为通过命名空间来约束这段样式在某个模块中，这种约束很弱的，指不定哪天来个新人不知道这个，就随便命名产生冲突影响了其他的组件。而 CSS in JS 的写法，可以解决这个问题。如果有些场景实在是需要 CSS 外联才能实现（比如 animation 的一些动画），可以使用 Glen Maddern: Internet Pro CSS modules 来解决这个问题。

本回答被网友采纳

Answer 3

类似这种写法，尝试尝试
let compoment = {
for （let i = 0; i < data.length; ++ i） {
return (
<div>data[i]<div>

)

}
}

Answer 4

getRowDraw :
function() {
return ( for (var i = 0; i < 24; i++) { }
); };

Answer 5

setToolbar(){
var tools = [];
for( var i = 0; i < 11; i++ ){
tools.push(<div key={i} ><div className="tool"></div></div>);
}
return tools;
}
在render内调用这个函数即可