0

まだ反応とその不思議な方法に頭を抱えています。jQuery + HTML では<ListView> </ListView>、 を生成する for ループによって後で入力される要素がある場合があります<Item>。同様に、Angular では単純に ng-repeat を行います。

これを行うための反応方法は何ですか？以前は<ListView items={listItems}></ListView>listItems が他の場所でlistItems = {heading:"qwerty", label:"test"}etc として定義されていたときにこれが機能していましたが、実行時にコードを調べると、<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>
    );
}
4

1 に答える 1

0

reactjs では一方向のデータ フローであることを忘れないでください。したがって、データを処理し、変更に基づいてUIが反応します...したがって、renderメソッドがループする場所になります...

レンダーハンドラーメソッドでは、次のようなものがあります...

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

}

単一項目のリストを表示する reactjs todo の例を見てください。

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

...これは役立つかもしれません。

于 2016-03-03T15:36:52.883 に答える