Phản hồi không hiển thị các lớp trên các phần tử

Question

Tôi hiện có hai tệp, một số app.js và index.html và khi tôi cố gắng hiển thị biểu mẫu với một số lớp CSS, phần tử HTML hiển thị nhưng các lớp bị thiếu.

Đây là tôi app.js:

var Form = React.createClass({ 
    handleClick: function() { 
     alert('click') 
    }, 
    render: function() { 
     return (
      <div> 
       <input class='form-control' type='text' name='list-name'/> 
       <button class="btn btn-primary" onClick={this.handleClick}>Submit</button> 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(<Form/>,document.getElementById('app')); 

Đây là cơ HTML của tôi:

<div class="container"> 
    <h1>Title</h1> 
    <div id="app" class="center"></div> 
</div> 

Answer 1

Vì class có thể mâu thuẫn với ECMAScript (đó là một từ khóa dành riêng), Phản ứng nhà phát triển đã chọn để sử dụng className như các thuộc tính cho phần tử HTML cho các lớp học thay vì class. Theo các tài liệu Phản ứng:

Note: Kể từ JSX là JavaScript, định danh như lớp và cho không được khuyến khích như các tên thuộc tính XML. Thay vào đó, các thành phần React DOM mong đợi các tên thuộc tính DOM như className và htmlFor, tương ứng. Source

từ khóa Từ for và class được dành riêng của ECMAScript (trong đó JavaScript là một thực hiện), họ không thể được sử dụng như tên thuộc tính XML. Điều đó có nghĩa là các thuộc tính của các thẻ như div hoặc input. Do đó, hãy sử dụng className để biểu thị lớp của phần tử HTML. Dưới đây là ví dụ áp dụng:

return (
    <div> 
     <input className='form-control' type='text' name='list-name'/> 
     <button className="btn btn-primary" onClick={this.handleClick}>Submit</button> 
    </div> 
); 

Lưu ý rằng className được sử dụng thay cho class.

Answer 2

Với phản ứng bạn phải sử dụng 'className' không lớp từ lớp là một cú pháp JavaScript reserved.

Sẽ là như div className = "myclass"