Reactjs JSX/React-追加ListView项

Reactjs JSX/React-追加ListView项,reactjs,jsx,Reactjs,Jsx,我的头仍然缠绕着反应和它神秘的方式。在jQuery+HTML中,可能有一个元素,该元素随后由一个生成的for循环填充。同样,在角度上,你只需重复一下 做这件事的方法是什么?以前,当我有一个时,listItems在别处被定义为listItems={标题:“qwerty”,标签:“test”}等,但现在当我在执行时检查代码时,我看到创建的每个都是“ReactElement”类型,因此不支持使用该行为 任何想法都将不胜感激!谢谢 更新代码: render:function(){ //Do th

我的头仍然缠绕着反应和它神秘的方式。在jQuery+HTML中,可能有一个元素
,该元素随后由一个生成
的for循环填充。同样,在角度上,你只需重复一下

做这件事的方法是什么?以前,当我有一个
时,listItems在别处被定义为
listItems={标题:“qwerty”,标签:“test”}
等,但现在当我在执行时检查代码时,我看到创建的每个
都是“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>
    );
}
render:function(){
//进行渲染
var listViewItemsToRender=this.state.ListViewItems.map((项)=>{
返回(
道具.平台道具.路线信息道具.时间到达

道具.时间到达

) }); 返回( 火车时刻 {本州,副标题} 离开 到达 ); }
记住,在reactjs中是单向数据流。所以你处理数据,用户界面根据你的修改做出反应。。。 所以你的渲染方法就是循环的地方

在渲染处理程序方法中,您将有一个类似于

render : function(){
  return itemsTobeDisplayed = items.map(function(item){
      return yourCustomItemMethodWhichRendersAsingleItem(itm);
    });

}
看看reactjs todo示例,它显示了一个包含单个项的列表


…这可能会有帮助。

谢谢!正是我所追求的。更新了我的代码以显示我认为我学到的东西-这仍然不起作用,项仍然是一个元素数组。更改行{listViewItemsToRender}修复了它!你现在正在混合状态和道具。在h1中,您可以访问props.routeInfo。这将是items.routeInfo。你在哪里有你的收集在国家或道具?因为您在此.state.ListViewItems.上调用了map。。