React - Render Component basierend auf windowWidth

Question

Wie kann ich mobile und Desktop-spezifische Assets innerhalb einer Komponente durch Berechnung der Seitenbreite rendern. Scheint wie ternäre Ausdrücke sind der Weg durch die Berechnung der Fensterbreite, aber ich bin auf Probleme stoßen. Hier

ist die Bedingung:

Wenn die Fenstergröße größer als 500 kann sagen - macht die Desktop-Komponente, die als Desktop bestimmte Vermögenswerte.

Else, render die mobile Komponente, die mobile spezifische Assets hat.

Ein weiterer Fall in dieser Logik ist, wenn eine Video-URL zur Verfügung gestellt wurde, hat dies Vorrang vor dem Fallback-Bild. Hier

ist, was ich habe, so weit, ich habe eine Formatfunktion die „window.innerWidth“ und aktualisiert Zustand wie so zu erhalten:

resize() { 
     let windowWidth = window.innerWidth; 

     this.setState({ 
      windowWidth: windowWidth 
     }) 
    } 

ich die Variable Window als Requisiten an die Komponente zu übergeben mit der bedingte Logik.

Hier ist meine Logik so weit:

render() { 
     const {windowWidth, video, fallbackImage, mobileVideo, mobileImage, videoCallback, videoAnimationOffset} = this.props; 
     return (
      <div className="hero-wrap col-xs-12 no-padding"> 
       {/* If video is available load otherwise render fallback image */} 
       {video ? (
        <div className="video-container"> 
         <Video 
          video={video} 
          mobileVideo={mobileVideo} 
          videoCallback={videoCallback} 
          videoAnimationOffset={videoAnimationOffset} 
         /> 
        </div> 
        ) : 
        <div className="image-container" style={{backgroundImage: `url(${process.env.DB_URL}${fallbackImage})`}}> 
        </div> 
       } 
      </div> 
     ) 
    } 

Hier ist vielleicht ein Begriff von dem, was ich denke, funktionieren könnte, aber sie können nicht verschachtelt ternäre Ausdrücke:

{/* If window width is greater than 500 render desktop */} 
{windowWidth > 500 ? 
    {video ? (
     <div className="video-container"> 
      <Video 
       video={video} 
       mobileVideo={mobileVideo} 
       videoCallback={videoCallback} 
       videoAnimationOffset={videoAnimationOffset} 
      /> 
     </div> 
     ) : 
     <div className="image-container" style={{backgroundImage: `url(${process.env.DB_URL}${fallbackImage})`}}> 
     </div> 
    } : null 
} 

Answer 1

Sie etwas tun könnte, wie Folgendes, um die Komponente abhängig von Ihrem Bildschirm Breite Wert und, ob die Video Prop ist vorhanden:

renderMobile =() => { 
    return (
    <img ... /> 
) 
}  

renderDesktop =() => { 
if(this.props.video) { 
    return (
    <video ... /> 
) 
} else { 
    return(
    <img ... /> 
) 
} 
} 

render() { 
return(
    (this.state.windowWidth > 500) ? this.renderDesktop() : this.renderMobile() 
) 
} 

Answer 2

Das scheint für mich zu funktionieren, können Sie das überprüfen?

return <div className="hero-wrap col-xs-12 no-padding"> 
    { 
    windowWidth > 500 
    ? (video 
     ? <div className="video-container"> 
      <Video 
       video={video} 
       mobileVideo={mobileVideo} 
       videoCallback={videoCallback} 
       videoAnimationOffset={videoAnimationOffset} 
      /> 
     </div> 
     : <div className="image-container" style={{backgroundImage: `url(${process.env.DB_URL}${fallbackImage})`}}></div>) 
    : null 
    } 
</div>