React.jsのJSXで条件分岐・繰り返しを記述する

If-Else in JSX | React で述べられているように、{...} の中で即時関数を利用すれば、その中でJSXの記法を利用してコードを記述できる。

条件分岐

3ペインの画面を例にした条件分岐の例。

import PaneCenter from './pane-center'
import PaneLeft from './pane-left'
import PaneRight from './pane-right'
import React from 'react'

export default class Panes extends React.Component {
  render() {
    return(
      <div className="panes">
        {(() => {
          if (this.props.panesCount >= 3) {
            return <PaneLeft />;
          }
        })()}
        {(() => {
          if (this.props.panesCount >= 2) {
            return <PaneCenter />;
          }
        })()}
        <PaneRight />
      </div>
    );
  }
}

繰り返し

記事一覧を例にした繰り返しの例。

import Article from './article'
import React from 'react'

export default class Articles extends React.Component {
  render() {
    return(
      <div className="articles">
        {this.props.articles.map((article) => {
          return <Article key={article.id} />;
        })}
      </div>
    );
  }
}