2016-03-19 13 views
1

次のコードが私のために基礎メニューを作成しない理由を理解できません。設定JSXまたはHTMLと間違って何も)私は「通常」のhtmlや$を(実行中でそれをテストし、ありませんは、FoundationJavaメニューをreactJSと連携させることができません。

 var MenuDisplay = React.createClass({ 

      render: function(){ 
       console.log("menu display render"); 
       var menu = (true)? 
       <ul className="dropdown menu" data-dropdown-menu> 
          <li> 
           <a id="profile_name">Welcome 
           </a><ul className="menu"> 
            <li>profile</li> 
            <li className="logout">logout</li> 
           </ul> 
          </li> 
         </ul> 
         : null; 
       return(
     <div> 
        {menu} 
        <FoundationPlugin /> 
        </div> 
       ) 
      } 
     }); 

     var FoundationPlugin = React.createClass({ 
      render: function(){ 
       //applying foundation() the whole document 
       $(document).foundation(); 
       return(
        <div></div> 
       ); 
      } 
     }); 

     React.render(
      <MenuDisplay />, 
      document.getElementById('myDiv') 
     ); 
  • メニューの基盤:以下は私のコードの超簡易版です。 。メニューを正しく表示する

  • FoundationPluginコンポーネントの内部ではなく、すべてのコードの後に​​.Foundation()を適用すると、上のコードが機能します。 しかし、私はこのようにしなければなりません。その理由は、まずRestApiからデータを取得しており、それには時間がかかるからです。 $()。foundation()を外部に置くと、$()。Foundation()に当たっても、私のコンポーネントはデータを取得せず、適切なhtmlタグを表示しません。すべてのレンダリングが完了した後で$()。foundationを実行する必要があります。

答えて

2

反応成分にはいくつかのライフサイクル機能がある。レンダリングが完了し、実際のDOMが更新されるのを待つ必要がある場合は、componentDidMountが必要です。

これが役に立ちます。

+0

私は正しい方向を指してくれてありがとう!私の場合はcomponentDidMountが機能しませんでしたが、componentDidUpdateは完全に機能しました。 – user308553

関連する問題