在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" >最后贴上map数据,就是用于遍历的数据。
let stationData={
在jsx中使用collection.map就好
可以在component内部定义一个或者外部传入一个mapper函数
constmapper=(item)=>{return(
<MyItem>{item.name}</MyItem>
)}
然后在render的jsx中
{collection.map(mapper)}
才发现fb
建议 CSS in JS 写法,虽然感觉推翻了多年的 CSS 工作进展。主要原因还是 CSS 的全局污染。模块化、组件化一直是前端不断优化追求的目标。传统的 CSS 无法很好的进行模块化。只能人为通过命名空间来约束这段样式在某个模块中,这种约束很弱的,指不定哪天来个新人不知道这个,就随便命名产生冲突影响了其他的组件。而 CSS in JS 的写法,可以解决这个问题。如果有些场景实在是需要 CSS 外联才能实现(比如 animation 的一些动画),可以使用 Glen Maddern: Internet Pro CSS modules 来解决这个问题。
本回答被网友采纳