kann Foundation-Menü nicht mit reactJS arbeiten

Question

Ich kann nicht herausfinden, warum der folgende Code das Fundament Menü für mich nicht erstellen wird. Unten ist die Super vereinfachte Version meiner Code:

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

• Es gibt nichts mit dem jsx oder html aufgebaut ist falsch, ich habe es in ‚normalen‘ html getestet und auf dem Menü $() Fundament läuft. . Es zeigt das Menü korrekt an

• der obige Code funktioniert, wenn ich den .Foundation() nach dem gesamten Code anstelle von FoundationPlugin Komponente anwende. Allerdings muss ich es so machen. Der Grund dafür ist, dass ich zuerst Daten von RestApi bekomme und das wird einige Zeit dauern. Wenn ich $() .foundation() nach draußen setze, wird meine Komponente die Daten noch nicht erhalten haben und das richtige html-Tag nicht darstellen. Ich muss $() .foundation erst nach dem Rendering ausführen.

Answer 1

Die reagierenden Komponenten haben mehrere Lebenszyklusfunktionen. Wenn Sie warten müssen, bis das Rendering abgeschlossen ist und das aktuelle DOM aktualisiert wird, benötigen Sie componentDidMount.

var MenuDisplay = React.createClass({ 
    componentDidMount: function(){ 
    // Do stuff that relies on your DOM being rendered here. 
    // Usually anything related to external libs like jQuery etc. 
    }, 
    render: function(){ 
    .... 
    .... 
    } 
}) 

Hoffe das hilft.