Wie man externe Javascript-Bibliotheken dynamisch zu den erstellten/aktualisierten Elementen in React hinzufügt

Question

Ich erstelle eine einfache React-App in Codepen: https://codepen.io/ch3rn0v/pen/owBKqm?editors=1011.

Zum Beispiel, hier ist der Teil JS:

var EmailInput = React.createClass({ 
    render: function() { 
     return (
      <div class="input-field"> 
       <input id="email" type="email" class="validate" /> 
       <label for="email" data-error="Please enter a valid email" data-success="That's a valid email">Email</label> 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(<EmailInput />, document.getElementById('test')); 

Wenn ich Material ui js lib hinzufügen und entsprechende CSS-Stile, sie richtig zu den statischen HTML-Elemente anzuwenden.
Aber wenn ich einige HTML-Elemente dynamisch erstellen, gilt das Material ui js lib nicht für diese dynamisch hinzugefügten Elemente.
Wie stelle ich die lib für die neu erstellten Elemente manuell?

Answer 1

Wenn JSX Syntax verwenden, müssen Sie className statt class und htmlFor statt for als thouse sind reservierte Schlüsselwörter in JavaScript (weitere Informationen here) verwenden.

So:

var EmailInput = React.createClass({ 
    render: function() { 
     return (
      <div className="input-field"> 
       <input id="email" type="email" className="validate" /> 
       <label htmlFor="email" data-error="Please enter a valid email" data-success="That's a valid email">Email</label> 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(<EmailInput />, document.getElementById('test'));