Tại sao phản ứng lại xóa tên lớp của tôi?

Question

Tôi đang học Reactjs và tôi đang hiển thị một trang đơn giản với một số thành phần. Một trong những thành phần này là thế này:

class Header extends React.Component { 
    render(){ 
     return (
      <header> 
       <div class="container"> 
        <Logo /> 
        <Navigation /> 
       </div> 
      </header> 
     ); 
    } 
} 

export default Header 

Tôi đang sử dụng bootstrap css Tôi muốn div bên trong tiêu đề để sử dụng phong cách của container, làm thế nào bao giờ hết, sau khi xây dựng, lớp đã biến mất.

Có cách nào để buộc lớp thuộc tính trong các thành phần không?

Answer 1

Bạn nên sử dụng className thuộc tính thay vì class ví dụ:

class Header extends React.Component { 
    render(){ 
     return (
      <header> 
       <div className="container"> 
        <Logo /> 
        <Navigation /> 
       </div> 
      </header> 
     ); 
    } 
} 

Kiểm tra Supported Attributes trong tài liệu.

Tất cả các thuộc tính này là lạc đà-cased và các thuộc tính class và for là className và htmlFor, tương ứng, để phù hợp với đặc điểm kỹ thuật DOM API.

Hy vọng điều này sẽ hữu ích.