iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
0
Modern Web

30天React從入門到入坑系列 第 5

DAY5:新朋友Components and Props

components讓你分割UI到單一元件可重復使用,每一個component都是相互隔離並獨立。但也要程式切的好才有可能達到上述功能,簡單來說儘量達到單一職責,不要把所有東西都塞在單一的component裡。

說到這還不知道components到底是什麼東西,其實就像是JavaScript functions。它可以接受任意參數(傳入參數react稱為props)並且回傳React element。初步學習直接拿建出來程式碼直接修改***src/index.js***

components functional

import React from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';

function SayHi(props) {
  return <h1>Hi, {props.name}</h1>;
}

const people = {"name": "John"};

ReactDOM.render(SayHi(people), document.getElementById('root'));
registerServiceWorker();

你也可以使用ES6 class去定義component,原本的SayHi函數改寫為單一檔案src/SayHi.js要記得export出來,並在src/index.js做import的動作才呼叫得到。

src/SayHi.js

import React, { Component } from 'react';

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

export default SayHi;

使用者定義component,它傳進去的參數事實上把JSX attributes傳到component,傳進去的參數就是***props object***,底下標籤的name傳進component,就是***this.props.name***。

<SayHi name="John" />
src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import SayHi from './SayHi';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<SayHi name="John" />, document.getElementById('root'));
registerServiceWorker();

localhost:3000_輸出結果
https://ithelp.ithome.com.tw/upload/images/20171224/20107317nKW5AaulMO.png

總結上述案例:

  1. 我們呼叫ReactDOM.render()去描繪SayHi元件
  2. 呼叫SayHi元件並傳遞{"name": "John"}
  3. SayHi元件回傳<h1>Hi, {this.props.name}</h1>
  4. React DOM更新到root元素

React components除了可以單一使用外,也可以component再嵌入其它component,有點像是把一塊塊的component組成一大塊,所以設計元件時必須是低耦合才能重覆使用。

import React from 'react';
import ReactDOM from 'react-dom';
import SayHi from './SayHi';
import registerServiceWorker from './registerServiceWorker';

function Group() {
  return (
    <div>
      <SayHi name="John" />
      <SayHi name="Mary" />
      <SayHi name="Bill" />
    </div>
  );
}

ReactDOM.render(<Group />, document.getElementById('root'));
registerServiceWorker();

上一篇
DAY4:create-react-app_說明目錄結構與檔案
下一篇
DAY6:state與資料流
系列文
30天React從入門到入坑30

尚未有邦友留言

立即登入留言