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