Wie kann ich Image Component zuerst in ReactJS rendern?

Question

Ich habe eine Bildkomponente namens "Sidebar" in einer Datei und eine Hauptinhaltskomponente, "Main" in einem anderen. Ich rende sie beide in einer anderen Komponente in einer anderen Datei namens "Suche". Das einzige Problem ist, dass der Inhalt von "Main" aufgrund der langsameren Ladezeit des Bildes hinter "Sidebar" wiedergegeben wird. Ich weiß, dass ich componentDidMount oder componentWillMount oder etwas verwenden sollte, aber ich verstehe die React-Dokumente nicht, wie man dieses benutzt, da sie kein Beispiel für diese zur Verfügung stellen. Könnte mir bitte jemand sagen, wie man das mit dem folgenden Code macht?

Sidebar.jsx

export default class Sidebar extends React.Component { 
    render() { 
     return (
      <div style = {{display: 'flex', 
          flexDirection: 'row', 
          position: 'absolute', 
          top: 0, 
          left: 0}}> 
       <BackgroundImage/> 
       <Nav/> 
       <Logo/> 
      </div> 
     ); 
    } 
} 

Main.jsx

export default class Main extends React.Component { 
    render() { 
     return (
       <div style ={{height: 900, width: 900, backgroundColor: 'yellow'}}/> 
     ) 
    } 
} 

Search.jsx

export default class Search extends React.Component { 
    componentWillMount() { 
     console.debug('componentWillMount'); 
    } 
    render() { 
    return (
     <div style = {{display: 'flex', flexDirection: 'row'}}> 
      <Sidebar/> 
      <Main/> 
     </div> 
    ); 
    } 
} 

Dank!

Answer 1

Ich reparierte das und nicht sicher, welches von denen den Trick, aber anscheinend hatte ich auch Position: 'absolut' in einer anderen Datei, die Dinge vermasselte, also nahm ich das heraus und benutzte dann flexBox in der Suchseite um Komponenten in einer Reihe darzustellen. Danke für die Hilfe!