仍然在思考反应及其神秘的方式。在jQuery + HTML中,可能有一个元素<ListView> </ListView>
稍后由产生<Item>
s的for循环填充。同样,在角度中,您只会重复 ng。
这样做的反应方式是什么?我以前在<ListView items={listItems}></ListView>
时有这个工作,列表在其他地方被定义为listItems = {heading:"qwerty", label:"test"}
等,但现在当我检查执行时的代码时,我看到创建的每个<Item>
都是"ReactElement"类型,因此不支持使用该行为。
任何想法将不胜感激!谢谢。
更新的代码:
render:function(){
//Do the rendering
var listViewItemsToRender = this.state.ListViewItems.map((item) => {
return (
<Item><div style={itemContainerParent}> <div style={itemPlatform}> <h1>props.platform</h1> </div><div style={routeInfo}><h1>props.routeInfo</h1></div><div style={timeInfo}><div style={row}><p>props.timeArriving</p></div><div style={row}><p>props.timeLeaving</p></div></div></div></Item>
)
});
return (
<Page>
<BannerHeader theme="prime" key="header" flex={0} textAlign="center">Train Times</BannerHeader>
<h2>{this.state.subheading}</h2>
<Container>
<Padding>
<BasicSegment>
<ButtonGroup fluid>
<Button onClick={this.showDepartures} variation={this.state.departuresSelected}>Departures</Button>
<Button onClick={this.showArrivals} variation={this.state.arrivalsSelected}>Arrivals</Button>
</ButtonGroup>
<Listview items={listViewItemsToRender}></Listview>
</BasicSegment>
</Padding>
</Container>
</Page>
);
}
请记住,在 reactjs 中是单一的数据流。因此,您处理数据,UI 会根据您的修改做出反应......所以你的渲染方法将是循环的地方...
在您的渲染处理程序方法中,您将有一个类似...
render : function(){
return itemsTobeDisplayed = items.map(function(item){
return yourCustomItemMethodWhichRendersAsingleItem(itm);
});
}
看看 reactjs todo 示例,它显示了包含单个项目的列表
https://github.com/tastejs/todomvc/tree/master/examples/react
。这可能会有所帮助。