Reactガイドを読んでいくその62

React

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

JSX における props

JSX における子要素

子要素としての関数

JSXタグに囲まれたJavaScript式は多くの場合以下のように評価される。
　・文字列
　・React要素
　・上記のリストとして評価

props.childrenはあらゆるプロパティ同様に任意のデータを渡すことができる。
またそのデータは必ずしもReactレンダーできるものに限らない。
例としては独自コンポーネントにprops.childrenを通してコールバックを定義することができる。
独自コンポーネントに渡される子要素はレンダーが実行されるまでにReactが理解できる要素に変換されている場合、どのようなものでも問題ない。
この方法は一般的ではないが、JSXを拡張していきたい希望が出てきたときにこの機能を使うと良い。

// numTimes の数だけ子要素のコールバックを呼び出し、コンポーネントを繰り返し作成する function Repeat(props) { let items = []; for (let i = 0; i < props.numTimes; i++) { items.push(props.children(i)); } return

{items}
; }

function ListOfTenThings() { return ( {(index) =>

This is item {index} in the list
} ); }

今日はここまで。