React第一階段實戰分析--評論功能(一)
阿新 • • 發佈:2018-11-14
第一步:元件劃分
元件樹表示:
第二步 元件實現
1.從元件的頂層開始,在一步步往下構建元件樹。
import React from 'react';
import CommentInput from './commentInput';
import CommentList from './commentList';
import './index.css'
class CommentApp extends React.Component{
render(){
return (
<div className='wrapper' >
<CommentInput />
<CommentList />
</div>
)
}
}
export default CommentApp;
import React from 'react';
class CommentInput extends React.Component{
render(){
return (
<div>
1111
</div>
)
}
}
export default CommentInput;
import React from 'react';
class CommentList extends React.Component{
render(){
return (
<div>
33333
</div>
)
}
}
export default CommentList;
基本框架搭好,
css樣式