メモ1
const Comp1 = () => ( <div> comp1 <p>comp1-p1</p> <p>comp1-p2</p> <p>comp1-p3</p> <Comp3 /> </div> ); const Comp2 = () => ( <h3>comp2</h3> ); const Comp3 = () => ( <h3>comp3</h3> ); const App = () => ( <div> <Comp1 /> <Comp2 /> </div> ); const render = () => ReactDOM.render(<App />, document.getElementById('app')); setTimeout(render, 0);
・下2行が表示を指示する部分。この2行がないと何も表示されない。
・Comp1~3はHTML部分を記述するコンポーネント。名前の頭の文字が大文字である必要があり?(jsbinでは小文字だと動かなかった。)
メモ2
const hs = { fontSize: 50 } const Hello = () => ( <div style={{ color: 'red', backgroundColor: 'black' }}>Hello</div> ); const App = () => ( <div style={hs}> <Hello /> </div> ); const render = () => ReactDOM.render(<App />, document.getElementById('app')); setTimeout(render, 0);
・スタイルもコンポーネントで記述できる。ただ名前の頭文字は大文字でなくてもOK?
・"{{"でくくる部分は、inline styleの書き方。
・camel caseで書く。margin-leftはmarginLeft
・複数プロパティを指定する場合は、カンマで区切る
・外部定義も可能。(上記のhs)
メモ3
const Hello = ({ name, color, backgroundcolor }) => ( <div> <p style={{ color, backgroundColor: backgroundcolor }}>Hello {name}!</p> </div> ); const Jiro = ({ name }) => ( <div> <p>Jiro {name}!</p> </div> ); const App = () => ( <div> <Hello name="World" color="blue" /> <Hello name="Ebisu" color="red" /> <Hello name="Ikebukuro" color="green" backgroundcolor="black" /> <Jiro name={"World" + " Test"} /> </div> ); const render = () => ReactDOM.render(<App />, document.getElementById('app')); setTimeout(render, 0);
・コンポーネントにパラメタを渡せる(props機能)
・パラメタはコンポーネント呼び出し時に指定する。上記のHello name="World"部分。XMLフォーマットで記述する必要あり!そのため、名前付き引数にする必要あり。
・上記のHello name="World"部分では、Hello name={"World" + 3}のようにしてJavascript記法を利用する事が可能。
・{{ color }}は、{{ color: color }}の意味。ES2015では省略が可能。
メモ4
const items = [ { name: 'aaa', color: 'black', backgroundcolor: 'white' }, { name: 'bbb', color: 'green', backgroundcolor: 'white' }, { name: 'ccc', color: 'pink', backgroundcolor: 'white' }, { name: 'ddd', color: 'yellow', backgroundcolor: 'white' }, { name: 'eee', color: 'blue', backgroundcolor: 'white' }, ]; const items2 = [ [1,2,3], [10,20,30], [100,200,300], ]; const Hello = ({ name, color, backgroundcolor }) => ( <div> <p style={{ color, backgroundColor: backgroundcolor }}>Hello {name}!</p> </div> ); const Hello2 = ({ item2 }) => ( <div> {item2.map((elem) => ( <p>Hello {elem}!</p> ))} </div> ); const App = () => ( <div> {items.map((item) => ( <Hello name={item.name} color={item.color} backgroundcolor={item.backgroundcolor} /> ))} {items2.map((item2) => ( <Hello2 item2={item2}/> ))} </div> ); const render = () => ReactDOM.render(<App />, document.getElementById('app')); setTimeout(render, 0);
・引数を渡すpropsで、配列を使うケース
・Appのdivの値部分にあたる{}はJSX内でJavaScriptを書くためのもの→JavaScript記述できる
・items . map ( ( item ) = > (処理) )は、JavaScriptの配列要素に対して特定の処理を実行するmapの記述
・itemsの要素が一つづつitemに格納されて、"処理"が実行される。
・mapの説明は、以下URL参照
Arrayの基礎知識と各メソッドの使用方法 - Qiita
・コンポーネント(constで定義された処理)に引数を渡す時は、常に名前付き引数にする必要あり?
→2次元配列処理をする
→→propsは、XMLフォーマットで記述する必要あり!そのため、名前付き引数にする必要あり。