React

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 //文字列