ReactJSとjQueryとmaterializeというjQueryを使ったフレームワークを使ったサイトを作成しています。
そこで質問です。Reactにより生成されるgridにmaterializeによるgridレイアウトを使用していますが、スマホで観た時にグリッドが1カラムになってくれません。しかし、PCのブラウザ(クローム、サファリで確認)では画面幅を小さくした時に1カラム表示となります。画面が大きい場合は3カラムのグリッドです。
このようになってしまう原因としては何が考えられるでしょうか。また、ReactとjQuery(Bootstrapのようなフレームワーク)の共存は不可能なのでしょうか。react-bootstrapなどを使用しなければならないのでしょうか。
以下にReactのコードを示します。一応jQueryがロードされた後にこのコードを実行するようにしましたが、効果ありませんでした。
(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);
またこのコードはjsxでコンパイルしたあとでgulpにより、他のJavaScriptファイルと一緒にminify,uglifyして1つのJavaScriptにしてロードしています。