import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
//初始化状态
state = {
comments:[
{id:1,name:"jack",content:"沙发!!!"},
{id:2,name:"rose",content:"板凳~"},
{id:3,name:"tom",content:"楼主好人"}
]
}
render(){
return (
<div className="app">
<div>
<input className="user" type="text" placeholder="请输入评论人" />
<br />
<textarea
className="content"
cols="30"
rows="10"
placeholder="请输入评论内容"
/>
<br />
<button>发送评论</button>
</div>
<div className="no-comment">暂无评论,快去评论吧~</div>
<ul>
{this.state.comments.forEach(item => {
<li key={item.id}>
<h3>评论人:{item.name}</h3>
<p>评论内容:{item.content}</p>
</li>
})}
</ul>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('root'))
this.state.comments.forEach -> this.state.comments.map,forEach只是遍历而已,并没有任何返回值
forEach()没有返回值
{this.state.comments.map(item => {
<li key={item.id}>
<h3>评论人:{item.name}</h3>
<p>评论内容:{item.content}</p>
</li>
})}