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

これは

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

ガイドのリンク

ja.reactjs.org

JSX を深く理解する

実行時に型を選択する

一般的な式をReactの要素の型として使用したい場合、その式を大文字から始まる変数に代入してから利用する。(といっても一般的には使用できないとみなしたほうが良い)
例として以下のようなコードが記載されている。

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // 間違った例。式は JSX の型に指定できません。
  return <components[props.storyType] story={props.story} />;
}

上のコードをきちんと動作させたい場合以下のように修正する。

import React from 'react';
import { PhotoStory, VideoStory } from './stories';

const components = {
  photo: PhotoStory,
  video: VideoStory
};

function Story(props) {
  // 正しい例。大文字で始まる変数は JSX の型に指定できます。
  const SpecificStory = components[props.storyType];
  return <SpecificStory story={props.story} />;
}

JSX における props

プロパティとしての JavaScript 式

JavaScript式は{}で囲むことでpropsとして渡すことができる。
<MyComponent foo={1+2+3+4} /> props.fooは10という評価をされる。
ifやforはJavaScriptでは式ではないので、JSX内で直接利用することができない。
なので間接的に利用するようにする。
例では以下のコードが記載されている。

function NumberDescriber(props) {
  let description;
  // このあたりで使うとよいらしい。
  if (props.number % 2 == 0) {
    description = <strong>even</strong>;
  } else {
    description = <i>odd</i>;
  }
  return <div>{props.number} is an {description} number</div>;
}

今日はここまで。