Phản ứng: phương thức với nhiều liên kết gây nên

Question

Rất mới để phản ứng, tôi đã tự hỏi làm thế nào để thực hiện mô hình này:

• cửa sổ phương thức trong DOM, ẩn đi cho đến khi kích hoạt.
• Nhiều liên kết trong tài liệu có thể kích hoạt phương thức và truyền dữ liệu vào đó.

Đây là điều mà có lẽ bạn có thể tìm thấy trên feed Facebook rất riêng của bạn: chỉ cần nhấp vào 'chia sẻ' trên bất kỳ bưu chính, bạn sẽ giành chiến thắng một phương thức tuyệt vời.

Bạn không chắc chắn cách bạn sẽ dịch điều này thành các "thành phần tạo phụ đề DOM" của React như thế nào?

Thành phần kích hoạt sẽ thông báo thành phần phương thức nào dường như là cách tắt trong cây DOM?

Answer 1

Nếu bạn đang sử dụng kiến ​​trúc kiểu Flux, điều này có thể đạt được độc đáo với Cửa hàng.

Hãy tưởng tượng bạn có một cửa hàng được gọi là MyModalStore (hoặc ShareModalStore hoặc bất kỳ phương thức nào). Cửa hàng chứa tất cả các dữ liệu cần thiết cho nội dung phương thức, cũng như có hay không nó sẽ được hiển thị.

Dưới đây là một cửa hàng đơn giản mà theo dõi xem phương thức là nhìn thấy được, và những gì tiêu đề là:

MyModalStore.js

var _visible = false; 
var _modalTitle; 

var MyModalStore = { 
    isModalVisible: function() { 
     return _visible; 
    }, 
    getModalTitle: function() { 
     return _modalTitle; 
    } 
}; 

MyModalStore.dispatchToken = Dispatcher.register(function(payload) { 
    var action = payload.action; 
    switch (action.type) { 
     case 'SHOW_MODAL': 
      _visible = true; 
      _modalTitle = action.modalTitle; 
      MyModalStore.emitChange(); 
      break; 

     case 'HIDE_MODAL': 
      _visible = false; 
      MyModalStore.emitChange(); 
      break; 
    } 
}); 

module.exports = MyModalStore; 

Sau đó, các thành phần muốn hiển thị modal kích hoạt hành động 'SHOW_MODAL' với số modalTitle và bản thân thành phần phương thức sẽ lắng nghe những thay đổi của cửa hàng để biết thời điểm hiển thị chính nó.

Bạn có thể xem mẫu thông lượng này trong các dự án mẫu trên facebook/flux on github.

Không sử dụng thông lượng, tôi đoán bạn sẽ cung cấp gọi lại xuống phân cấp mô-đun của bạn để bất kỳ ai cũng có thể nhấn gọi lại để hiển thị phương thức và được ủy quyền cho thành phần phương thức thực tế ở cấp cao nhất. Đây không phải là một cách tiếp cận tuyệt vời cho các ứng dụng lớn hơn, vì vậy tôi khuyên bạn nên sử dụng phương pháp thông lượng.

Chúng tôi xuất bản một số store helper code here, nhưng có rất nhiều khác libraries and examples out there as well.