こんにちは! 今回は、Propsについて学びましょう^^
<目次>
Propsとは
Propsとは、Propertyを意味する言葉です。例えば、関数の引数になります。
Propsを利用することで、コンポーネントをよりカスタマイズすることができるようになります。
実際にコードを見てみましょう。
|
1 2 3 4 5 6 |
# フォルダ構成 $ tree ch02 ch02 ├── Person.js ├── index.html └── index.js |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Props Demo Sample</title> </head> <body> <h1>Learning Props</h1> <div id="root"></div> <script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone"></script> <script src="Person.js" type=text/jsx></script> <script src="index.js" type=text/jsx></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
index.js class App extends React.Component { render() { return ( <div> {/* propsを指定 */} <Person name="Harry" age="30" /> <Person name="Mike" age="20" /> </div> ) } } ReactDOM.render(<App/>, document.getElementById('root')); |
|
1 2 3 4 5 6 7 8 9 10 |
Person.js class Person extends React.Component { render() { console.log(this.props); {/* デバッグ用 */} const name = this.props.name; const age = this.props.age; return <p>My Name Is {name}. I'm {age} years old.</p> } } |
Propsを設定するのは、簡単です。index.jsに設定した通り、コンポーネントに任意の変数と値を設定するだけです。設定した値は、対象のコンポーネント側で、「tihs.props」から取得できます。
Propsの要件
Propsの要件を書いてみました。
・Propsは、コンポーネントの設定に用いられる
・Propsの値は、書き換え不可(immutable)
・Propsは、文字列で渡す必要がある
<User name="KOUKI", title="SoftWare Developer" />
・他のTypeを渡したい場合は、{}で囲って渡す必要がある
<User name="KOUKI", salary={ 10000 } hobbies { ["bridge", "reading", "tea"] } />
実装してみるとこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class App extends React.Component { render() { return ( <div> <Person name="Harry" age={30} salary={500000} skills={["PC", "Accounting", "leader", "presentation", "audit"]} isCEO={false} /> </div> ) } } ReactDOM.render(<App/>, document.getElementById('root')); |
やってみよう1
ここまで学んだ内容を「自分で考えながら」コードを書いてみると知識がかなり定着します。
何かコードを書いてみましょう! サンプルを載せておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Props Demo Sample</title> </head> <body> <h1>SLOT</h1> <div id="root"></div> <script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone"></script> <script src="Slot.js" type=text/jsx></script> <script src="index.js" type=text/jsx></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
index.js class App extends React.Component { render() { return ( <div> <h1>STATIC SLOT HERE</h1> <Slot s1='😀' s2='😀' s3='😀' /> <Slot s1='😀' s2='😅' s3='😀' /> </div> ) } } ReactDOM.render(<App/>, document.getElementById('root')); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class Slot extends React.Component { render() { const {s1, s2, s3} = this.props; const winner = (s1 === s2) && (s2 === s3); return ( <div> <p>{s1} {s2} {s3}</p> <p>{winner ? 'WIN': 'LOSE'}</p> <p>--------------</p> </div> ) } } |
JSX内でループ処理
JSX内でループ処理を行いたい場合は、「array.map(fn)」を使用します。arrayとは、配列のことです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Messages.js class Message extends React.Component { render() { const msgs = [ {id: 1, msg: "Hi!"}, {id: 2, msg: "Please let me know about him!"} ]; return ( <ol> {msgs.map(m=> <li>{m.msg}</li>)} </ol> ) } } |
やってみよう2
「やってみよう1」のソースコードをループを使用したものに書き換えてみましょう。解答例を載せておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
index.js class App extends React.Component { render() { return ( <div> <h1>STATIC SLOT HERE</h1> <Slot result="WIN" slots={['😀', '😀', '😀']} /> <Slot result="FALSE" slots={['😀', '😅', '😀']} /> </div> ) } } ReactDOM.render(<App/>, document.getElementById('root')); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Slot.js class Slot extends React.Component { render() { const {result, slots} = this.props; const block = <p>{slots.map(s=> s)}</p>; return ( <div> {block} <p>{result}</p> <p>--------------</p> </div> ) } } |
ループを使うことで、プログラムがより良くなりましたね^^
デフォルトProps
Propsには、初期値を設定することも可能です。
|
1 2 3 4 5 6 7 8 9 10 |
Hello.js class Hello extends React.Component { static defaultProps = { from: "Harry", }; render() { return <p>Hi {this.props.to} from {this.props.from</p> } } |
|
1 2 3 4 5 6 7 8 9 |
index.js ReactDOM.render( <div> <Hello to="Hiroko" from "Elen" /> <Hello to="Naomi" /> </div> document.getElementById("root") ); |
スタイル
最後にCSSでスタイルをつけてみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Props Demo Sample</title> <link rel="stylesheet" href="style.css"><!-- new --> </head> <body> <h1>SLOT</h1> <div id="root"></div> <script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone"></script> <script src="Slot.js" type=text/jsx></script> <script src="index.js" type=text/jsx></script> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Slot.js class Slot extends React.Component { render() { const {result, slots} = this.props; const block = <p>{slots.map(s=> s)}</p>; return ( <div className="Slot">{/* className追加 */} {block} <p>{result}</p> <p>--------------</p> </div> ) } } |
|
1 2 3 4 5 6 7 8 |
style.css .Slot { border: 2px solid #333; background: #839592; margin-bottom: 10px; color: red; } |
index.htmlにて、style.cssを読み込みを行っています。そして、Slot.jsのタグにつけた「className」に対して、スタイルを定義しました。
通常、HTMLに定義するクラスは「class」とつけますが、Reactだと「className」になります。
スタイルを適用した画面がこちらです。
タグに直接、CSSを埋め込むこともできます(インライン)。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class Slot extends React.Component { render() { const {result, slots} = this.props; const block = <p style={{fontSize: '50px'}}>{slots.map(s=> s)}</p>;{/* {{}}で囲ってスタイルを定義する */} return ( <div className="Slot"> {block} <p>{result}</p> <p>--------------</p> </div> ) } } |
インラインで埋め込む時は、タグはキャメルケースになります。(font-size -> fontSize, background-color -> backgroundColor)
あとがき
Propsを使えば、プログラミングの幅が広がりそうですね。次回は、より実践的なReactアプリを作っていきましょう^^
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。