2015-10-11 15 views
6

Tôi đang cố gắng sử dụng trình đơn cố định của Giao diện người dùng và thanh bên cùng với khung công tác Phản hồi. Tôi muốn đạt được kết quả tương tự như trang Tài liệu ngữ nghĩa của giao diện người dùng (trong Màn hình máy tính bảng và thiết bị di động) với trình đơn cố định ở trên cùng và thanh bên trái được phủ lên khi được bật.Sử dụng trình đơn cố định của Giao diện người dùng và thanh bên trong React

tôi đã đặt cùng một ví dụ về điều đó ở đây: https://jsfiddle.net/bullwinkle/m3hr5v36/

Nó hoạt động, nhưng Semantic-UI không thích cách bố trí, và cung cấp các lỗi sau đây trong giao diện điều khiển:

Sidebar: Had to add pusher element. For optimal performance make sure body content is inside a pusher element 
Sidebar: Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag <div class=​"ui inverted left vertical sidebar menu" data-reactid=​".0.0">​…​</div>​ 

Vì vậy, Semantic-UI di chuyển bố trí xung quanh để .sidebar.pusher là con trực tiếp của <body>. Đó không phải là cách phản ứng chính xác.

Như đã giải thích ở đây:

Semantic UI sidebar throws console errors with ReactJS when render app to body

bạn sẽ cần phải xác định một bối cảnh tùy chỉnh cho thanh bên. OK, vì vậy tôi đã làm điều đó trong khởi sidebar:

componentDidMount() { 
    $('.ui.sidebar').sidebar({ 
     transition: 'overlay', 
     context: $('#layout') 
    }); 
}, 

(xem các phiên bản thứ 4 của jsfiddle, tôi không thể gửi thêm các liên kết vì đại diện thấp)

Đó sửa chữa các thông báo lỗi , nhưng bây giờ menu trên cùng không còn cố định nữa và thanh bên cuộn cùng với nội dung. Tôi đã thử tất cả mọi thứ tôi có thể để có được Semantic-UI và Phản ứng để chơi cùng độc đáo, nhưng tôi đang rõ ràng là thiếu cái gì

+0

Bạn đã bao giờ làm việc này chưa? – Jack

+0

cùng một vấn đề. vẫn không có giải pháp –

Trả lời

0

tôi đã cùng một vấn đề với Ember, nó tạo ra các divs sau:

<div data-label="layer-div" style="display: none;"></div> 
<div data-label="preview-div" style="pointer-events: none; display: none;"></div> 

... trước nội dung của bạn, tạo ra sự cố cho thanh bên, vì nội dung cần phải được bao bọc trong lớp PUSHER để thanh bên có thể PUSH nó khi mở.

Vì vậy, React đang thêm một số nội dung phụ ngoài lớp học của bạn, đó là những gì nó đang phàn nàn.

{{!-- Pusher means that the sidebar will push it out of the way --}} 
<div class="ui grid pusher"> 

Nếu bạn có bất kỳ nội dung nào trước lớp pusher của bạn, ngoại trừ div bên, bạn sẽ gặp lỗi. Hãy xem mã nguồn của bạn, bạn sẽ thấy rằng Semantic-ui đã tạo ra một lớp pusher thứ hai để bọc nội dung được tạo ra bởi phản ứng.

Các vấn đề liên quan