如何在 reactjs 中呈现列表项

Question

我正在使用 List 垂直呈现数据。文档建议了一种硬编码数据的方法，但我有一个数组中的数据。

文档有这个例子：

<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 中呈现列表项

How to render list items in reactjs

reactjs

material-ui