iT邦幫忙

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

React系列 第 6

React的prop與state

首先props是React父元件與子元件間的溝通橋樑,可以看成是個靜態的物件,運作的方式是在父元件給props的值並傳給子元件,然後在子元件讀取,每當父元件傳送props給子元件都會造成子元件重繪

我們首先在index.js這個父元件呼叫Welcome這個子元件的地方給他一個name叫做Kevin

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Welcome from './welcome.js';

ReactDOM.render(
  <Welcome name="Kevin" />,
  document.getElementById('root')
);

並在Welcome子元件新增一個接props的地方

//welcome.js
import React, { Component } from 'react';

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

export default Welcome;

這樣Hello World!就會變成Hello Kevin!了,你也可以試試修改props的值或是多傳幾個props看看


states是元件的內部狀態,可以被改變,主要用來記錄自身狀態,不過它跟一般的變數不同,如果你要修改它就必須用setState這個方法

在welcome.js新增一個state取名叫做name並給它一個值叫做David,並把接props的地方改為接state

//welcome.js
import React, { Component } from 'react';

class Welcome extends Component {  
  state = { name: "David" }
  render() {
    return (
      <div>
        <h1>Hello {this.state.name}!</h1>
      </div>
    );
  } 
}

export default Welcome;

你就會發現名字從Kevin變成David了,不過這不是一個正確使用state的方式,如果只是要傳遞參數或字串的話props就可以輕鬆做到,用states是殺雞用牛刀,接下來會講到states跟生命週期的關係


上一篇
React的元件化特性
系列文
React6
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言