如何使用React MediaQuery組件在桌面版和移動版之間切換

Question

我必須在我的項目中創建桌面/移動切換器，但我無法實現如何使用React MediaQuery組件進行切換。 下面是一個例子他們GitHub

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

var A = React.createClass({ 
    render: function(){ 
    return (
     <div> 
     <div>Device Test!</div> 
     <MediaQuery minDeviceWidth={1224}> 
      <div>You are a desktop or laptop</div> 
      <MediaQuery minDeviceWidth={1824}> 
      <div>You also have a huge screen</div> 
      </MediaQuery> 
      <MediaQuery maxWidth={1224}> 
      <div>You are sized like a tablet or mobile phone though</div> 
      </MediaQuery> 
     </MediaQuery> 
     <MediaQuery maxDeviceWidth={1224}> 
      <div>You are a tablet or mobile phone</div> 
     </MediaQuery> 
     <MediaQuery orientation='portrait'> 
      <div>You are portrait</div> 
     </MediaQuery> 
     <MediaQuery orientation='landscape'> 
      <div>You are landscape</div> 
     </MediaQuery> 
     <MediaQuery minResolution='2dppx'> 
      <div>You are retina</div> 
     </MediaQuery> 
     </div> 
    ); 
    } 
}); 

我可以改變視meta標籤來控制，我在我的CSS文件中描述的一切。但是如何啓用/禁用React MediaQuery組件？

Answer 1

據我可以理解你的問題，這樣的事情應該工作。

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

var A = React.createClass({ 
    render: function(){ 
    let mediaComponent; 
    if(/* enableMediaComponent */) { 
     mediaComponent = <MediaQuery minDeviceWidth={1224}> 
      <div>You are a desktop or laptop</div> 
      <MediaQuery minDeviceWidth={1824}> 
       <div>You also have a huge screen</div> 
      </MediaQuery> 
      <MediaQuery maxWidth={1224}> 
       <div>You are sized like a tablet or mobile phone though</div> 
      </MediaQuery> 
      </MediaQuery> 
      <MediaQuery maxDeviceWidth={1224}> 
      <div>You are a tablet or mobile phone</div> 
      </MediaQuery> 
      <MediaQuery orientation='portrait'> 
      <div>You are portrait</div> 
      </MediaQuery> 
      <MediaQuery orientation='landscape'> 
      <div>You are landscape</div> 
      </MediaQuery> 
      <MediaQuery minResolution='2dppx'> 
      <div>You are retina</div> 
      </MediaQuery> 
    } else { 
     mediaComponent = // whatever you want to render when your MediaQuery is disabled 
    } 
    return (
     <div> 
     <div>Device Test!</div> 
     {mediaComponent} 
     </div> 
    ); 
    } 
});