ReactJSで画像コンポーネントを最初にレンダリングする方法はありますか？

Question

私は、あるファイルには "サイドバー"というイメージコンポーネントがあり、別のファイルにはメインコンテンツコンポーネント "メイン"があります。私はそれらを両方とも「検索」と呼ばれる別のファイル内の別のコンポーネント内にレンダリングしています。唯一の問題は、画像の読み込みが遅くなるため、「メイン」の内容が「サイドバー」の後ろにレンダリングされることです。私はcomponentDidMountやcomponentWillMountなどを使用するはずだと知っていますが、React docsを理解することはできません。なぜなら、これらの例を提供していないからです。誰かが私に次のコードでそれを行う方法を教えてもらえますか？

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> 
    ); 
    } 
} 

ありがとう！

Answer 1

私はこれを固定していますが、どちらがトリックをしたのかはっきりしていませんが、明らかに位置がありました。別のファイルに「絶対」というものがありましたので、コンポーネントを連続してレンダリングします。助けてくれてありがとう！