React.js 實戰 - 元件 & Props
0 聯絡我
2. 完整部落格連結
3. 個人知乎
4. gayhub
元件可以將UI切分成一些獨立的、可複用的部件,這樣你就只需專注於構建每一個單獨的部件.
元件從概念上看就像是函式，它可以接收任意的輸入值（稱之為“props”），並返回一個需要在頁面上展示的React元素.
1 函式定義/類定義元件
定義一個元件最簡單的方式是使用JavaScript函式：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
該函式是一個有效的React元件，它接收一個單一的“props”物件並返回了一個React元素.
我們之所以稱這種型別的元件為函式定義元件，是因為從字面上來看，它就是一個JavaScript函式.
你也可以使用 ES6 class 來定義一個元件:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
上面兩個元件在React中是相同的.
我們將在[下一節]討論類的一些額外特性。在那之前，我們都將使用較為簡潔的函式定義元件。
2 元件渲染
在前面，我們遇到的React元素都只是DOM標籤：
const element = <div />;
然而，React元素也可以是使用者自定義的元件
const element = <Welcome name="Sara" />;
當React遇到的元素是使用者自定義的元件，它會將JSX屬性作為單個物件傳遞給該元件，這個物件稱之為“props”。
例如,這段程式碼會在頁面上渲染出”Hello,Sara”:
我們來回顧一下在這個例子中發生了什麼：
- 我們對<Welcome name="Sara" />元素呼叫了ReactDOM.render()方法
- React將{name: 'Sara'}作為props傳入並呼叫Welcome元件
- Welcome元件將<h1>Hello, Sara</h1>元素作為結果返回。
- React DOM將DOM更新為<h1>Hello, Sara</h1>。
警告:
元件名稱必須以大寫字母開頭。
例如，<div /> 表示一個DOM標籤，但 <Welcome /> 表示一個元件，並且在使用該元件時你必須定義或引入它。
3 組合元件
元件可以在它的輸出中引用其它元件，這就可以讓我們用同一組件來抽象出任意層次的細節.
在React應用中，按鈕、表單、對話方塊、整個螢幕的內容等，這些通常都被表示為元件.
例如，我們可以建立一個 App 元件，用來多次渲染 Welcome 元件
通常，一個新的React應用程式的頂部是一個 App 元件.
但是，如果要將React整合到現有應用程式中，則可以從下而上使用像 Button 這樣的小元件作為開始，並逐漸運用到檢視層的頂部.
元件的返回值只能有一個根元素。這也是我們要用一個 <div> 來包裹所有 <Welcome /> 元素的原因。
4 提取元件
可以將元件切分為更小的元件
例如，來看看這個Comment元件
function formatDate(date) {
return date.toLocaleDateString();
}
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
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>
);
}
const comment = {
date: new Date(),
text: 'I hope you enjoy learning React!',
author: {
name: 'Hello Kitty',
avatarUrl: 'http://placekitten.com/g/64/64'
}
};
ReactDOM.render(
<Comment
date={comment.date}
text={comment.text}
author={comment.author} />,
document.getElementById('root')
);
這個元件接收author(物件)、text(字串)、以及date(Date物件)作為props，用來描述一個社交媒體網站上的評論.
這個元件由於巢狀，變得難以被修改，可複用的部分也難以被複用。所以讓我們從這個元件中提取出一些小元件。
首先，我們來提取Avatar元件
function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
);
}
Avatar作為Comment的內部元件，不需要知道是否被渲染.
因此我們將author改為一個更通用的名字user。
我們建議從元件自身的角度來命名props，而不是根據使用元件的上下文命名。
現在我們可以對Comment元件做一些小小的調整：