Chapter 02

コンポーネント

snaga
snaga
2022.05.14に更新

コンポーネント定義

ファンクションコンポーネントの定義

const MyComponent = () => {
  return (...);
}

クラスコンポーネントの定義

class MyComponent extend Component {
  return (...);
}

配列を使ったコンポーネントの一括作成

const App = () => {
  const data = [
    {name: "Foo"},
    {name: "Bar"}
  ];

  return (
    <div>
    {
      data.map((b, index) => {
        return <MyComponent name="{b.name}" key={index}/>;
      });
    }
    </div>
  );
}

コンポーネントのイベント

ボタンクリック

class MyComponent extends Component {
  // ハンドラー
  handleButton = () => {
    this.setState({ count: this.state.count + 1 });
  };

  // 描画
  render() {
    return (
      <React.Fragment>
        <button onClick={this.handleButton}>+1</button>
      </React.Fragment>
    );
  }
}

コンポーネント描画後のイベント

Hook 以前。

class MyComponent extend Component {
  componentDidMount() {
    ...;
  }
}

Hook を使う場合。

class MyComponent extend Component {
  useEffect(() => {
    ...;
  }, [])
}

コンポーネント間(親子)でのパラメータの受け渡し

props の利用

<MyComponent name={'Foo'} />
const MyComponent = (props) => {
  console.log(props.name);
  return <div>{props.name}</div>;
};

props の型定義

MyComponent.propTypes = {
  name: Proptypes.string,
};

コンポーネントの状態(state)管理

state を変更するとコンポーネントは自動的に再描画される。

state による状態保持

Hook 以前。

class MyComponent extends Component {
  // 初期化
  constructor(props) {
    super(props);
    console.log(this.state);
    this.state = { count: 0 };
  }

  // 描画
  render() {
    return <div>count: {this.state.count}</div>;
  }
}

Hook を使う場合。

import React, { useState } from 'react';

function App() {
  const [data, setData] = useState([]);

  setData(response.data);

  return (...);
}