react学習dad 3(構成部品)

3つのコンポーネント
1.割引
2. state
3.コンテキスト

保証する

Propertyは、親構成部品から子構成部品に値を渡すために使用します.この場合、property値には変更できないフィーチャーがあります.
うん...簡単に考えると、大人が抱いている子供にキャンディをあげるようなものなのかな…ほほほ
Propertyの様々な使い方を理解する
Propertyでは、JavaScriptのすべてのデータ型を使用できます.この時、プロ選手の資料型は事前に発表したほうがいい.
どうしたんですか.
プロセスのデータ型が予め宣言されているため、反応エンジンがプロセスに伝達する値の変化を効果的に検出し、開発者が予期せぬ指定されたデータ型をプロセスに伝達しようとしたときに警告メッセージとして通知することができる.
文字列のアウトラインの使用

import React from 'react';
import PropTypes from 'prop-types';    // 1

class PropsComponent extends React.Component {
  render() {
    return <div className="message-container">{this.props.name}</div>; // 2
  }
}

PropsComponent.propTypes = {  // 3
  name: PropTypes.string,  // 4
};

export default PropsComponent;

propTypeライブラリをインポートします.

name propertyで受信した文字列を出力します.

Props ComponentのProTypesという特殊変数(Prop-Typesライブラリ名PropTypesとは異なる!!!)番組を定義する資料型を使う.

Propertyのデータ型をオブジェクトとして指定し、PropsComponentを実装します.protTypeに格納されます.

prop-typesを利用して資料型を発表する
だからprop-typesを使ってこそ、propertypeでpropertyの資料型を確定することができます.
では、この構成部品を使用してみましょう.

import React from 'react';
import PropComponent from './03/PropComponent';

class App extends React.Component {
  render() {
    return (
      <div>
        <PropComponent name = "두잇 리액트" />
      </div>
    );
  }
}

export default App;

ラベルにエレメント名を追加し、そのエレメントのproperty nameに出力として値を入力します.