cách quản lý trạng thái hoạt động trong thanh điều hướng bootstrap trong phản ứng?

Question

Tôi biết rằng lớp đang hoạt động phải được quản lý thủ công trong trình khởi động. Tôi đã làm điều đó một vài lần với jQuery.

Dự án mới nhất của tôi hoạt động với phản ứng.

Tôi biết rằng tôi không được phép đặt các lớp trong dom với jQuery khi sử dụng phản ứng. Nhưng làm thế nào điều này sẽ được thực hiện một cách chính xác?

Answer 1

Bạn chỉ cần chỉ định giá trị active của các tab trong hàm render của mình. Để biết tab có nên có giá trị cho thuộc tính className hay không để lưu trữ ở đâu đó.

Làm cách nào để lưu trữ thứ gì đó trong một thành phần phản ứng? Bạn sử dụng state. Bạn chưa hiển thị bất kỳ mã nào nhưng bạn có thể chỉ cần theo dõi tab nào hiện đang hoạt động ở trạng thái của bạn.

Bạn có thể ví dụ có điều này:

getInitialState: function() { 
    return { activeTabClassName: "tab1" }; 
} 

render: function() { 
    return (
     <ul> 
      <li className={(this.state.activeTabClassName === "tab1") ? "active" : ""}></li> 
      <li className={(this.state.activeTabClassName === "tab2") ? "active" : ""}></li>className   </ul> 
    ); 
} 

Cảnh báo: khối mã Đây chỉ là một ví dụ và không được kiểm tra. (Có một số cách để làm điều đó).

Bạn cũng có thể kiểm tra điều này: Switch class on tabs with React.js

Answer 2

Bạn có thể sử dụng react-router để tự động hoặc quản lý trạng thái hoạt động theo cách thủ công trong thanh điều hướng khởi động.