23264


ReactJSとjQueryと[materialize](http://materializecss.com/)というjQueryを使ったフレームワークを使ったサイトを作成しています。

そこで質問です。Reactにより生成されるgridにmaterializeによるgridレイアウトを使用していますが、スマホで観た時にグリッドが1カラムになってくれません。しかし、PCのブラウザ(クローム、サファリで確認)では画面幅を小さくした時に1カラム表示となります。画面が大きい場合は3カラムのグリッドです。

このようになってしまう原因としては何が考えられるでしょうか。また、ReactとjQuery(Bootstrapのようなフレームワーク)の共存は不可能なのでしょうか。react-
bootstrapなどを使用しなければならないのでしょうか。

以下にReactのコードを示します。一応jQueryがロードされた後にこのコードを実行するようにしましたが、効果ありませんでした。

[code]

    (function($){
    var GridBox = React.createClass({
      loadData: function(){
        $.ajaxSetup({
          cache: false
        });
        $.getJSON(this.props.url, function(json){
          this.setState({data: json});
        }.bind(this));
      },
      getInitialState: function(){
        return {data: {
          "items": []
        }};
      },
      componentDidMount: function(){
        this.loadData();
      },
      render: function(){
        var rows = this.state.data.items.map(function(row){
          return (
              <Row data={row}/>
              );
        });
        return (
            <div>
              <h5>{this.state.data.title}</h5>
              {rows}
            </div>
            );
      }
    });
    
    var Row = React.createClass({
      render: function(item){
       var items = this.props.data.map(function(item){
        return (
            <Col item={item}/>
            );
       });
       return (
           <div className="row">
            {items}
            </div>
           );
      }
    });
    
    var Col = React.createClass({
      render: function(){
        var imageURL = "dist/images/" + this.props.item.thumbnail;
        return (
            <div className="col s12 m4">
              <div className="card">
                <div className="card-image waves-effect waves-block waves-teal">
                  <a href={this.props.item.url} target="_blank">
                    <img src={imageURL} className="lazy"/>
                  </a>
                </div>
                <div className="card-content">
                  <p>{this.props.item.name}</p>
                </div>
              </div>
            </div>
            );
      }
    });
    
    
    ReactDOM.render(
        <GridBox url="data/item.json"/>,
        document.getElementById('item')
        );
    
    
    })(jQuery);
    
[/code]

またこのコードはjsxでコンパイルしたあとでgulpにより、他のJavaScriptファイルと一緒にminify,uglifyして1つのJavaScriptにしてロードしています。


CC BY-SA 3.0
2016-03-18T14:52:40.730
23263
2016-03-18T18:47:28.877
7232
question
javascript jquery reactjs
ReactjsとjQueryフレームワークを同時に使うには


[このスレではtaylorさんが述べているように](https://stackoverflow.com/a/33044103/1167750)、この問題は[`viewport`](https://developer.mozilla.org/ja/docs/Mobile/Viewport_meta_tag)のことに関連していると私は思います。`meta`タグの`viewport`が使用されていない時は、スマホのブラウザはPCのブラウザのように振る舞うのです。

下記のコード例のように、`viewport`を[使用すると](https://developer.mozilla.org/ja/docs/Mobile/Viewport_meta_tag#.E3.83.93.E3.83.A5.E3.83.BC.E3.83.9D.E3.83.BC.E3.83.88.E3.81.AE.E5.9F.BA.E6.9C.AC)、スマホを使う場合は`Materialize`のスマホへの[レスポンシブ`CSS`](http://materializecss.com/grid.html#grid-
responsive)が期待される効果を発揮すると思います。

[code]

    <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
      <!-- 自分のコンテンツ -->
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2016-03-18T16:38:11.073
23264
2016-03-18T18:47:28.877
2017-05-23T12:38:55.250
-1
4129
23263
answer