我正在使用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
});
答案 0 :(得分:4)
使用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'/>
答案 1 :(得分:0)
使用类似的东西迭代你的数组:
_buildItem(item, index) {
return <ListItem key={index} primaryText={item.text}/>
}
render() { return (
<List>
{this.state.todos.map(this._buildItem)}
</List>
)}