CSS styles de Réagir: comment mettre en œuvre les media queries?

Vous ne pouvez pas faire des choses comme les requêtes des médias et de la pseudo-éléments sans une feuille de style. Toutefois, vous pouvez accéder à l'information dont elles sont construites sur en JavaScript. Par exemple, une implémentation naïve de redimensionner mixin:

var ResizeMixin = {
    componentDidMount: function(){
        window.addEventListener('resize', this._resize_mixin_callback);
    },
    _resize_mixin_callback: function(){
        this.setState({
            viewport: {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            }
        });
    },
    componentWillUnmount: function(){
        window.removeEventListener('resize', this._resize_mixin_callback);
    }
};

Vous pouvez l'inclure dans votre composant, et d'avoir un rendu qui ressemble à ceci:

render: function(){
  var style;

  if (this.state.viewport.width > 900) {
    style = {width: '45%', margin: '2.5%'};
  }
  else {
    style = {width: '100%', margin: '0'};
  }
  ...
}

Je ne suis pas sûr que ce soit une bonne idée, mais il peut être fait.

---

Par "implémentation naïve", je veux dire il a des problèmes de performances. la méthode addEventListener est en fait assez lourd, de sorte que vous voulez enchaîner que dans un simple js cas de l'émetteur. Vous pouvez également avoir qu'une seule instance de la fenêtre d'affichage de l'objet à enregistrer certaines GC pression. Et vous avez envie d'étrangler le cas, car les navigateurs émet très rapide lorsque vous faites glisser la fenêtre.

Comme avec toutes les bonnes abstractions, vous pouvez faire ces réglages lorsque vous avez du temps libre, et vous n'avez pas besoin de modifier les composants de l'utiliser.