如何动态地添加外部JavaScript库到创建/更新元素在React

Question

我在codepen中创建一个简单的React应用程序：https://codepen.io/ch3rn0v/pen/owBKqm?editors=1011。

例如，这里是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')); 

当我添加材料UI JS lib和相应的CSS样式，他们正确地适用于静态的HTML元素。
但是，当我动态创建一些html元素时，材料ui js lib不适用于那些动态添加的元素。
如何让lib手动查找新创建的元素？

Answer 1

当使用JSX语法，你必须使用className代替class和htmlFor代替for如在JavaScript（详细信息here）thouse保留关键字。

像这样：

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