Reactに挑戦してみる 5
概要
React参考書籍を読んでみる。
参考書籍
WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用
- 作者: 柴田文彦
- 出版社/メーカー: インプレス
- 発売日: 2016/11/25
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
条件(三項)演算を使う
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の属性が指定できる。