Reactメモ

propsについて、ページ側(親)で各コンポーネント(子)にプロパティなどを渡している

app.js

import React, {Component} from 'react';

const App = () => {
    const profiles = [
        {
            name: "tarou",
            favorite: "game",
            job: "student",
            score: 80,
        },
        {
            name: "hanako",
            favorite: "cooking2,
            job: "no job",
        },
    ]

    return <div>
        {
            profiles.map((profile) => { // 各項目をmap()で回す
                return <User name={ profile.name }  // profileの値をUserコンポーネントへ渡す
                             age={ profile.age }
                             job={ profile.job}
                />
            })
        }
    </div>
}

const User = (props) => { // propsでUserコンポーネントへ渡された値を取得操作する
    return <div>HI! I am {props.name} ! and my favorite is {props.favorite} years old! and my job is {props.job}</div>
}

// 以下の記述でデフォルト設定を設定することが可能
User.defaultProps = {
    age: 1,
    favorite: "no",
    job : "no job",
    score: 80,
}

// 以下の記述でタイプの指定や条件(一種のバリデーション)が設定できる
User.propTypes = {
    name: PropTypes.string, // nameは文字列指定
    score : PropTypes.number.isRequired, // ageは数字型で必ず必要
}

export default App;

stateとは、propsとは違い、各コンポーネントの中でのみ使用する状態のこと。
propsは変更不可能だが、stateは変更可能。

クラスコンポーネントで状態管理
コンポーネントの管理を行うのはsetState({})で行うことができる
また、setState()が実行されるたびにrender()が実行され画面が再描写される。

App.js

import React, {Component} from 'react';

const App = () => {
    return (
        <div>
            <Counter/>
        </div>
    )
}

class Counter extends Component  {
    // constructorは親の要素を受け取り、それをpropsで扱うことができる
    constructor(props) {
        super(props);
        this.state = {count: 0}
    }

    handlePlusButton = () => {
        // 状態管理を扱う際の関数
        this.setState({count :this.state.count + 1})
    }

    handleMinuxButton = () => {
        this.setState({count: this.state.count - 1})
    }

    render() {
        console.log(this.state)
        return (
            <React.Fragment>
                <div>count: {this.state.count}</div>
                <button onClick={this.handlePlusButton}>+1</button>
                <button onClick={this.handleMinuxButton}>-1</button>
            </React.Fragment>
        )
    }
}

export default App;