react.jsでシンプルにMediaQueryを実現

react.jsのrenderをMediaQueryの条件で変えていく方法

概要

下記のライブラリをいれると簡単に実現できます。シンプル設計で素晴らしいです。

自分で書くとイベントをうけてレンダリングしたりしないといけないのでけっこう面倒です。

使い方

browserifyなどでrequireするだけです。

例えばMediaQueryという変数に展開すると
そちらがカスタムタグのような使い方ができます。
あとはqueryの中に条件を書いて囲むだけです。

var MediaQuery = require('react-responsive');
var React = require('react');

var Td = React.createClass({
    render: function(){
        if (this.props.src)
        {
            return (
                <td key={this.props.key}>
                    <MediaQuery query='(max-width: 768px)'><span className="headName">{this.props.headName} </span> <Anchor key={this.props.value} text={this.props.value} src={this.props.src} /></MediaQuery>
                    <MediaQuery query='(min-width: 768px)'><Anchor key={this.props.value} text={this.props.value} src={this.props.src} /></MediaQuery>
                </td>
            )
        }else{
            return (
                <td key={this.props.key}>
                    <MediaQuery query='(max-width: 768px)'> <span className="headName">{this.props.headName}</span> {this.props.value} </MediaQuery>
                    <MediaQuery query='(min-width: 768px)'> {this.props.value} </MediaQuery>
                </td>
            )
        }
    }
});

仕組み

すごくシンプルです。条件に合致しない場合はnoscriptで囲われて非表示になります。

<noscript data-reactid=""></noscript>

注意点

css3のMediaQueryでの条件分けとReact.jsのMediaQueryを同時に使うと
エラーになる場合があります。

同じ要素に対して条件分けをいれる場合はうまく使い分けたほうがいいですかね。