元件 (Component) 與屬性 (Props)

2018-09-12

元件 (Component) 讓你可以將用戶界面分成獨立的，可重複使用的小元件，並且可以對每個部件進行單獨的設計，是 React 最基本也最重要的觀念之一。

最簡單的定義元件的方法是寫一個 JavaScript 函數。

1
2
3

function Person(props) {
  return <h1>My name is {props.name}</h1>;
}

Person 函數是一個有效的 React 元件，因為它接收一個 props 參數, 並返回一個 React 元素。這稱為”函數式(Functional)“元件，因為從字面上看來它就是一個 JavaScript 函數。
你也可以用 ES6 的 class 定義元件。

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

以上的 <Person /> 與 <Welcome /> 都是合法的 React Component，相信你也注意到他們命名的第一個字母都必須要大寫。

元件互嵌

元件的另一個好處是，他們可以互相嵌入對方的程式碼，例如以上的 <Person /> 與 <Welcome /> 可以將它們組合在一起。

function Person(props) {
  return <h1>My name is {props.name}</h1>;
}

class Welcome extends React.Component {
  render() {
    return(
      <div>
        <h1>Hello, {this.props.name}</h1>
        <Person name='Kobe' /> //嵌入上面定義的 Person 元件
      </div>
    )
  }
}

const element = <Welcome name="Shaq" />
ReactDOM.render(
  element,
  document.getElementById('root')
)

//Hello, Shaq 
//My name is Kobe

這裡要注意的是必須要用一個空的 div 把 <h1>Hello, {this.props.name}</h1> 與 <Person name=’Kobe’ />包起來，否則會出錯(註)，這是因為 JSX 最終會轉成 JavaScript，且每一個 JSX 節點都對應到一個 JavaScript 函數，所以在 Component 的 render 方法中只能回傳一個根節點 (Root Nodes)。

(註): 在最新的 React 16 版本裡，可使用 <React.Fragment></React.Fragment> 取代 <div></div>，如此一來，將不會 render 無意義的 <div></div>

Props

如果你用函數定義一個 React 元件，你可透過 props 讓父元件傳值給子元件，props 是不可變的，我們不應該去改變子元件的 props 值，子元件的 props 值只取決於父元件傳了什麼值給它。

function User(props){
    return <h1>Hi, {props.name}</h1>
}
const me = <User name='George' />

ReactDOM.render(
  me,
  document.getElementById('root')
)
//Hi, George

以上的程式碼將會印出 Hi, George。當我們用創建一個 User Component，並且在裡面設立了一個 props.name 的接口，然後我定義了常數 me 為一個 User 元件，並在裡面設置了一個 name 值為 George，當我在 render 的時候，就會以 George 去輸出為 <User /> 的 props value。

參考連結:
React 16 - The Complete Guide
React Props
组件(Components) 和属性(Props)

uncategorized

元件互嵌

Props