So stoppen Sie ein React Rendern auf Medienabfragen

Question

Ich habe CSS (daher sollte ich es berücksichtigen), die Medienabfragen enthält, ob ein Element angezeigt werden soll. Das CSS funktioniert wie erwartet, aber das Problem besteht darin, dass React das DOM immer noch neu rendert und neu strukturiert, auch wenn die Medienabfrage dazu führt, dass das Element trotzdem nicht erneut gerendert wird.

Gibt es eine Möglichkeit zu sagen, reagieren nicht zu rendern? Gibt es eine Möglichkeit, die Medienabfrage in React zu erkennen und dann nicht zu rendern, wenn die Medienabfrage das nicht sagt?

Answer 1

Sie könnten matchMedia verwenden und das Rück false von shouldComponentUpdate

etwa wie folgt je nach Anwendungsfall

shouldComponentUpdate(nextProps) { 
    return window.matchMedia('(min-width: 768px)').matches 
}