Question

我正在使用List垂直呈现数据。 Docs为硬编码数据提供了一种方法，但我在数组中有数据。

文档有这个例子：

<MobileTearSheet>
  <List>
    <ListItem primaryText="Inbox" leftIcon={<ContentInbox />} />
    <ListItem primaryText="Starred" leftIcon={<ActionGrade />} />
    <ListItem primaryText="Sent mail" leftIcon={<ContentSend />} />
    <ListItem primaryText="Drafts" leftIcon={<ContentDrafts />} />
    <ListItem primaryText="Inbox" leftIcon={<ContentInbox />} />
  </List>
  <Divider />
  <List>
    <ListItem primaryText="All mail" rightIcon={<ActionInfo />} />
    <ListItem primaryText="Trash" rightIcon={<ActionInfo />} />
    <ListItem primaryText="Spam" rightIcon={<ActionInfo />} />
    <ListItem primaryText="Follow up" rightIcon={<ActionInfo />} />
  </List>
</MobileTearSheet>

我想要在todos中呈现ListItem数组。谁能建议我怎么做？

this.state = {
  open: false,
  todos: [],
  notetext: ""
};

我在数组中添加元素如下：

todos.push({
  id: todos.length,
  text: this.state.notetext,
  completed: false
});

Answer 1

使用map来迭代todos数组，然后为array的每个项目创建一个ListItem元素。

像这样写：

_renderTodos(){
    return this.state.todos.map(el => {
        return <ListItem primaryText={el.text} key={el.id}/>
    })
}

render(){
    return(
        <MobileTearSheet>
            <List>
                {this._renderTodos()}
            </List>
        </MobileTearSheet>
    )
}

检查此代码段：

class App extends React.Component{
    
     constructor(){
        super();
        this.state = {
           a: [1,2,3,4]
        }
     }
  
     _renderItems(){
         return this.state.a.map(el => <p>{el}</p>)
     }
     
     render(){
        return(
            <div>
                {this._renderItems()}
            </div>            
        )
     }
}

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Answer 2

使用类似的东西迭代你的数组：

_buildItem(item, index) {
    return <ListItem key={index} primaryText={item.text}/>
}

render() { return (
    <List>
        {this.state.todos.map(this._buildItem)}
    </List>
)}

如何在reactjs中呈现列表项

2 个答案: