組件裡有什麼?

import React, {Component} from 'react';
class Item extends Component{
    //static property靜態屬性
    static propTypes = {
    }

    //static method靜態函式
    static getDerivedStateFromProps(nextProps, prevState){
    }

    //state屬性
    state = {
      x: 1,
      count: 0
    }

    //生命週期函式，生命週期裡的this一定是指本身class的組件
    constructor(){

    }
    componentDidMount(){
    }
    componentDidUpdate(prevProps, prevState){
    }

    //自訂函式，函式this不一定指本身組件，但如宣告為屬性並用=>this就為組件本身
    onChange= () => {
    }
    getData(){
    }

    //組件裡一定要有render函式，render函式一定要return一個元素
    render(){
        return <div></div>
    }
}

//也可在組件外面定義屬性
Item.propTypes = {
}

事件處理與狀態更新

狀態 ⇒ state
變更狀態 ⇒ setState
範例: 點擊按鈕後，將 title 的 hello 變更成 hi

Message.js

import React, { Component } from 'react';

class Message extends Component {
  state = {
    title: 'hello'
  }
  changeState = () => {
    this.setState({
      title: 'hi'
    })
  }
  render() {
    return (
      <div>
        <div>{this.state.title}</div>
        <button onClick={this.changeState}>change state</button>
      </div>
    );
  }
}

export default Message;

自訂函式如果不是使用箭頭函式宣告的話，要加上 constructor，指定 this 為組件本身，
如果沒有指定 this，onClick 的 this 會指向 button，button 沒有 setState 屬性就會報錯，建議自訂函式還是以箭頭函式的方法宣告

Message.js

import React, { Component } from 'react';

class Message extends Component {
  state = {
    title: 'hello'
  }
  constructor(props) {
    super(props);
    this.changeState = this.changeState.bind(this);
  }
  changeState() {
    this.setState({
      title: 'hi'
    })
  }
  render() {
    return (
      <div>
        <div>{this.state.title}</div>
        <button onClick={this.changeState}>change state</button>
      </div>
    );
  }
}

export default Message;

props: 上面傳下來的屬性

一樣的組件，但想要不同的內容，可以使用 props，
範例： ol 裡的每個 li 的文字分別為不同的文字
props 傳字串直接使用引號，如果傳其他型態要使用大括號 {}

Item.js (內層組件)

import { Component } from "react";

class Item extends Component {
  render(){
    return (
      <li>{this.props.text} {this.props.price + 1}</li>
    )
  }
}

export default Item;

List.js (外層組件)

import { Component } from "react";
import Item from "./Item";
class List extends Component {
  render(){
    return(
      <ol>
        <Item text='hello' price={10}/>
        <Item text='world' price='10'/>
        <Item text='hello world' price='100'/>
      </ol>
    )
  }
}
export default List;

如標籤是 closing-tag 包起來，可用 this.props.children 取得文字

Item.js

import { Component } from "react";

class Item extends Component {
  render(){
    return (
      <li>{this.props.children}</li>
    )
  }
}

export default Item;

List.js

import { Component } from "react";
import Item from "./Item";
class List extends Component {
  render(){
    return(
      <ol>
        <Item>hello1</Item>
        <Item>hello2</Item>
        <Item>hello3</Item>
      </ol>
    )
  }
}
export default List;

Hey！想學習更多前端知識嗎?

最近 Lala 開了前端課程 👉【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手，又或是想學 RWD 的初學者，
我們將帶你從零開始，深入了解並掌握 RWD 響應式網頁設計的核心技術，快來一起看看吧 😊

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Lala Code

React基本組件介紹

組件裡有什麼?

事件處理與狀態更新

props: 上面傳下來的屬性

Hey！想學習更多前端知識嗎?

🚀線上課程分享

Hahow

六角學院

Udemy