JSX/React - 追加 ListView 项

Question

我仍然在思考 React 及其神秘的方式。在 jQuery + HTML 中，可能有一个元素 <ListView> </ListView>，稍后由生成 <Item> 的 for 循环填充。同样，在 angular 中，您只需 ng-repeat。

执行此操作的反应方式是什么？我以前有这个工作，当我有一个 <ListView items={listItems}></ListView>，listItems 在别处被定义为 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>
    );
}

Answer 1

记住在reactjs中是单向数据流。所以你处理数据并且 ui 根据你的修改做出反应...... 所以你的渲染方法将是循环的地方......

在您的呈现处理程序方法中，您将拥有类似...

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

}

看看 reactjs 待办事项示例，它显示了一个包含单个项目的列表

https://github.com/tastejs/todomvc/tree/master/examples/react

...这可能会有所帮助。

JSX/React - 追加 ListView 项

JSX/React - Appending ListView Items

jsx

reactjs