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

これは

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

ガイドのリンク

ja.reactjs.org

JSX における props

JSX における子要素

子要素としての JavaScript 式

JavaScriptの式は{}で囲むことによって子要素として渡すことが可能。
JSXも同様の機能を持っている。

<Mycomponent>Sample</Mycomponent> <Mycomponent>{'Sample'}</Mycomponent>

この機能は長さの決まっていないJSX式のリストを表示したいような場合に便利に使うことができる。
例えば以下のようなHTML

function Item(props) {
    // ここのリスト
    returen <li>{props.message}</li>;
}

function TaskList() {
    const tasks = ['make branch', 'add files', 'commit & pull request'];
    return (
        <ul>
           // ここのリスト
           {tasks.map((message) => <Item key={message} message={message} />)}
        </ul>
    );
}

JavaScriptの式は異なる型の子要素と併用することができるため、テンプレートリテラルの代わりにもなる。

今日はここまで。