Props

2481 ワード
React Props テキストリンク

構成部品のプロパティ設定に使用する要素.
props値は、構成部品を読み込んで使用する親構成部品で設定できます.

propsデフォルトの設定

function App(props) {...}

App.defaultProps = {
	name: "기본값"
}

proptypeでpropを検証する

// import 추가
import PropTypes from "prop-types";

function App(props) {...}

App.defaultProps = {
	name: "기본값"
}

// 하단에 type 설정 추가
App.propTypes = {
	name: PropTypes.string
}
これで、nameは文字列として渡さなければなりません.
指定したタイプとは異なる方法で送信される場合は、画面でデータを確認できますが、コンソールから警告メッセージが表示されます.指定したタイプに基づいてデータ値を設定します!

isRequiredを使用して必要な検証


より正確なpropsType設定が必要な場合!


proptTypeを設定する場合、isRequiredが後に付いている場合は、タイプが指定されていない場合に警告メッセージを送信します.(データ値が設定されていない場合は、まだタイプが指定されていない状態なので、チェックできます.)
App.propTypes = {
	name: PropTypes.string,
    age: PropTypes.number.isRequired
}

クラス構成部品での使用

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class App extends Component {
  static defaultProp = {
    name: '기본 이름'
  }

  static propTypes = {
    name: PropTypes.string,
    age: PropTypes.number.isRequired,
  }

  render() {
    const {name, age} = this.props;
      return (
          <div>
            <h1>이름 : {name}</h1>
            <h1>나이 : {age}</h1>
          </div>
      );
    }
}

export default App;
ネットワーク
[TIL]10月1日Context-API,グローバルステータス