如何在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
});

- N Sharma

---

所以你想要在列表项中呈现每个待办事项？你应该使用数组对象的map函数来迭代数组并创建新的ListItems，将每个待办事项传递给它们的props。 - Michael Lyons

你想要作为主要文本的待办事项项目文本是什么？右侧图标怎么样？ - Mayank Shukla

@MayankShukla 我不需要正确的图标，只需要待办事项。 - N Sharma

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'/>

- Mayank Shukla

---

如果他正在使用ES6类，则必须将其绑定到_renderTodos。 - Michael Lyons

由于您在方法中引用了this.state.todos，因此需要绑定上下文。 - Michael Lyons

谢谢。在函数名前使用下划线是一个规则吗？ - N Sharma

不，这不是一条规则，只是一种写作方式而已。我过去常常使用 _ 来区分自定义函数和预定义库函数。 - Mayank Shukla

@MayankShukla 它显示的像这样 http://imgur.com/a/W5uT7 我不确定为什么会有一条线？这是 List 默认的吗？为什么在左下角没有图像图标？ - N Sharma

Answer 2

使用类似以下的方式迭代您的数组：

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

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

- Ji aSH

---

好的，同时出现了一个答案，而且几乎是一样的 xD - Ji aSH