【React④】Props

#Propsとは

• Propsとはコンポネントの属性、あるデータの属性で参照できるもののこと
• {}で囲って渡していく
  • 受けわたせるデータ型は文字列、数値、真偽、配列、オブジェクト、変数などなんでも
  • 文字列は{}なしでもok
• 例えばUserのComponentに対してnameというPropsを与えることができる

###keyの指定
ReactではバーチャルDOMでどのDOMが変更されたかを管理し、変更点のみ実際のDOMに反映している。key={index}のようにそれぞれのDOMにkeyを与えてあげることで必要最低限なDOM範囲を管理している

//エラー文
array,iterator should have a unique "key" prop.

import React from 'react';

const App = () =>{
    const profiles = [
        { name:"Taro", age:10 }, 
        { name:"Hanako", age: 5 },
        { name:"Noname" }
    ]
  
    return (
      <div>
      {
        profiles.map((profile,index) => {
          return <User name={profile.name} age={profile.age} key={index}/>
        })
      }
      </div>
    )
  }
  
  //外からの入力を参照して画面に出力することができる
  const User = (props) =>{
    return <div>Hi!, I am {props.name},and {props.age} years old! </div>
  }
  
  //ageが入力されなかったときにage1がデフォルト値として1が渡される
  User.defaultProps ={
    age:1 
  }

#Propsでデータを受け渡す

親コンポーネントから子コンポーネントにPropsデータを受け渡す。

Blog.jsx

//親コンポーネント
import React from 'React';
import Article from "./Article";

//title={"React"} が子コンポーネントに受け渡される
class Blog extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <>
            <Article title={"React"} />  
            </>
        )
    }
}

export default Blog

Article.jsx

import React from 'React';

const Article = (props) =>{
    return(
        <div>
            <h2>{props.title}</h2>
        </div>
    )
};

export default Article

#いろんな型のデータを渡す
子コンポーネントに以下を渡します
title={"React"} 、order={3} 、isPublished={true} 、author={"authorName"}

Blog.jsx

import React from 'React';
import Article from "./Article";

class Blog extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        const authorName = "Facebook";
        return(
            <>
              <Article 
                title={"React"} 
                order={3} 
                isPublished={true} 
                author={"authorName"} 
              />  
            </>
        )
    }
}
export default Blog

Article.jsx

import React from 'React';

const Article = (props) =>{
    let publishState ="";
    if (props.isPublished){
        publishState = "公開"
    }else{
        publishState = "非公開"
    } 
    return(
        <div>
            <h2>{props.title}</p>
            <p>順番：{props.order}</p>
            <p>著者：{props.author}</p>
            <p>{publishState}</p>
        </div>
    )
};

export default Article

#再利用する

Blog.jsx

import React from 'React';
import Article from "./Article";

class Blog extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        const authorName = "Facebook";
        return(
            <>
              <Article title={"React"} />  
              <Article title={"JSX"} />  
              <Article title={"Component"} />  
              <Article title={"Props"} />  
            </>
        )
    }
}
export default Blog