Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

Reactに挑戦してみる 5

概要

React参考書籍を読んでみる。

参考書籍

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

条件(三項)演算を使う

JSXで、if, for ループは使えないので、:を使った条件演算をするらしい。

var RandomColor = React.createClass({
    render: function(){
    return (
        <h2 style={{color:
            this.props.value >=0 ? 'green' : 'red'
          }}>
          The number is {this.props.value}
          </h2>
     );
  }
});

ReactDOM.render(
    <RandomColor value={Math.floor(Math.random() * 20) -10} />,
    document.getElementById('content')  
);

真偽値の属性を指定する

html

<script src="https://fb.me/react-15.3.0.js"></script>
<script src="https://fb.me/react-dom-15.3.0.js"></script>

<div id="content"></div>

<p><input type="checkbox" checked>HTML Check1</p>
<p><input type="checkbox" checked="false">HTML Check2</p>
<p><input type="checkbox">HTML Check3</p>

JSX

ReactDOM.render(
    <div>
    <p><input type="checkbox" checked/>JSX Check1</p>
    <p><input type="checkbox" checked={true}/>JSX Check2</p>
    <p><input type="checkbox" checked={false}/>JSX Check3</p>
  </div>,
  document.getElementById('content')
 )
  • htmlは、checkedという属性を入れると、falseだろうがtrueだろうがチェックが入る。
  • それに対して、JSXでは、checkedの属性が指定できる。