import React, { Component } from 'react';
function Comment(props){
const {id,content,author} = props.comment;
return (
<div>
<p>{id}</p>
<p>{content}</p>
<p>{author}</p>
</div>
)
}
class CommentList extends Component {
constructor(props){
super(props);
this.state={
comments:[]
}
}
componentDidMount(){
setTimeout(()=>{
this.setState({
comments:[
{
id:1,
author:'facebook',
content:'renact非常好'
},
{
id:2,
author:'尤雨溪',
content:'Vue非常好'
}
]
})
},1000)
}
render() {
return (
<div>
{
this.state.comments.map((item,i)=>{
return(
<Comment key={item.id} comment={item}></Comment>
)
})
}
</div>
);
}
}
export default CommentList;
import React, { Component } from 'react';
import './App.css'
import CommentList from './Components/CommentList'
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import { Button, Tooltip } from 'antd';
// import { SearchOutlined } from '@ant-design/icons';
class App extends Component {
render() {
return (
<div className='app'>
<CommentList></CommentList>
</div>
)
}
}
export default App;
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App></App>,document.getElementById('root'));
叹气。
