React Learn Note 4
React學習筆記(四)
標簽(空格分隔): React JavaScript
三、組件&Props
組件可以將UI切分成一些獨立的、可復用的部件,這樣你就只需專注於構建每一個單獨的部件。
組件接收props,返回react元素。
1. 函數定義\類定義組件
最簡單組件方式 - 函數定義組件:
// 函數定義組件
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
ES6 class定義組件,效果同上:
// ES6 class定義組件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
2. 組件渲染
將組件作為React元素,標簽的屬性作為props鍵值:
const element5_1 = <Welcome name="Sara"></Welcome>;
ReactDOM.render(
element5_1,
document.getElementById('root5')
);
**警告:** 組件名稱必須大寫字母開頭。
3. 組合組件
React組件也可以嵌套。
function App() {
return (
<div>
<Welcome name="Bob"></Welcome>
<Welcome name="Cahal"></Welcome>
<Welcome name="John"></Welcome>
</div>
);
}
ReactDOM.render(
<App></App>,
document.getElementById('root6')
);
4. 提取組件
可以將組件切分為更小的組件。
function formatDate(date) {
return date.toLocaleTimeString();
}
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img src={props.author.avatarUrl} alt={props.author.name}/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
ReactDOM.render(
<Comment author={{avatarUrl: '../static/img/zhifibao_key.jpg', name: 'Jessie'}} text="This is comment text." date={new Date()}></Comment>,
document.getElementById('root7')
);
這個組件接收author(對象)、text(字符串)、以及date(Date對象)作為props。是個復雜的組件。接下來我們提取拆分這個組件。
首先提取Avatar組件:
// 提取組件
function Avatar(props) {
return (
<img src={props.user.avatarUrl} alt={props.user.name} className="Avatar"/>
);
}
function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user}></Avatar>
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
);
}
// 最終Comment組件被簡化為
function Comment2(props) {
return (
<div className="Comment">
<UserInfo user={props.author}></UserInfo>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
ReactDOM.render(
<Comment2 author={{avatarUrl: '../static/img/zhifibao_key.jpg', name: 'Xiaoyu Lee'}} text="Wow, this is very beautiful." date={new Date()}></Comment2>,
document.getElementById('root8')
);
5. Props的只讀性
無論是使用函數或是類來聲明一個組件,它決不能修改它自己的props。
The end... Last updated by: Jehorn, Jan 07, 2018, 5:44 PM