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(

{(() => { if (this.props.panesCount >= 3) { return ; } })()} {(() => { if (this.props.panesCount >= 2) { return ; } })()}
); } } ```

繰り返し

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

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

export default class Articles extends React.Component { render() { return(

{this.props.articles.map((article) => { return
; })}
); } } ```