React勉強中_メモ

覚書です。

##構文

###class なんとか extends Component

classコンポーネント

class なんとか extends Component {
 constructor(props){
  super(props);
  this.state = {//このクラスに設定する値 名前固定
　　　キー：null　//初期値なければnullを入れとく
　　};
 }
　メソッド(){
　//任意のメソッド
  this.setState({キー：新しい値});//stateを更新する際は.setState()
 }
 render(){//クラスで書きだすものはrenderメソッドにセットする
  return(
   <コンポーネント></コンポーネント>
　 <コンポーネント 任意の属性={this.state.キー}>
   </コンポーネント>
  )
 }
}

###props

class TestPage extends Component {
 constructor(props){
  super(props);
  this.state = {comment:'初期値'};
 }

 render(){
  return(
   <Test testprops={this.state.comment} />
  )
 }
}

const Test = (props) => {
 return(
  <div>{`Testコンポーネントのpropsは「${props.testprops}」です`}</div>
 );
}

<コンポーネント props1の名前={props1の値} props2の名前={props2の値} />

props.props1の名前　って感じで呼び出せる

##エラー / ESLint

###'なんちゃら' is defined but never used no-unused-vars

変数'なんちゃら'を定義してるけどそれ使ってないよ
引数もひっかかる

###'パラメータ名' is missing in props validation react/prop-types

パラメータ（プロパティ？props？何が何だか）のバリデーションしてね
（下記コード参照）
してるよ！！！！と思ったらタイプミスしてた…

コンポーネント.propTypes = {
　パラメータ名:PropTypes.型,
　パラメータ名:PropTypes.型.isRequired//パラメータが必須の場合
};

型の種類

• PropTypes.array　//配列
• PropTypes.bool　//論理値
• PropTypes.func　//関数
• PropTypes.number　//数値
• PropTypes.object　//オブジェクト
• PropTypes.string　//文字列