Thực hành tốt nhất: sử dụng lại các thành phần hoặc viết các bản sao

Question

Tôi đang làm việc trên một cơ quan quản lý cửa hàng với phản ứng, alt và không thay đổi. đối tượng phục vụ của tôi trông nhiều hơn hoặc ít hơn như thế này:

offer: { 
    groups: [{ 
    articles: [{ 
     optionGroups: [{ 
      options: [] 
     }] 
    }] 
    }] 
} 

Tôi lặp qua tất cả các mục và hiển thị một biểu mẫu để chỉnh sửa nhóm, bài viết, .... Nếu một cái gì đó được thay đổi, tôi gọi một OfferAction và chuyển đường dẫn, trường đã thay đổi và giá trị mới cho thực thể, ví dụ: OfferActions.update([2, 'articles', 5, 'optionGroups'], 'name', 'MyOptionGroup')

Bây giờ tôi muốn hiển thị cùng một biểu mẫu chính xác, nhưng với các trình giữ chỗ và trình thay đổi khác nhau. Nếu một biểu mẫu được điền, thực thể phải được tạo ra (một OfferAction khác phải được gọi). Cách tốt nhất để làm điều này là gì?

Tôi nghĩ về các khả năng sau:

Đẩy Elements trống trên nhà nước OfferStore
Các yếu tố có sản phẩm nào sẽ được hiển thị như những người khác. Tôi không cần sao chép bất kỳ thành phần nào, nhưng tôi cần phải thực hiện nhiều kiểm tra, OfferAction phải được gọi sau khi thay đổi, trình giữ chỗ để hiển thị và các giá trị ẩn nếu chúng bị thiếu. Sau khi thực thể được tạo ra, tôi sẽ chỉ đẩy một phần tử trống khác vào mảng phiếu mua hàng.

Tạo thành phần thứ hai
Tôi chỉ có thể tạo thành phần thứ hai mà tôi vẽ. Tôi sẽ quản lý biểu mẫu thông qua trạng thái nội bộ, tạo thực thể khi biểu mẫu được điền và đặt lại trạng thái. Điều này sẽ dẫn đến một loot của jsx trùng lặp.

Có cách nào tốt nhất để giải quyết vấn đề này mà không sao chép thành phần hoặc làm phức tạp thành phần khác không?

Answer 1

Vì vậy, bạn chỉ muốn trình giữ chỗ khác nhau và thay đổiHandlers?

Đặt giá trị boolean trên thành phần cấp cao nhất cần được sao chép. Sau đó, cho mỗi trình giữ chỗ/changeHandler;

if(this.props.someBooleanValue){ 
    //alternate action or placeholder 
} else { 
    //original action or placeholder 
} 

Bao gồm someBooleanValue={true} trên các phiên bản thay thế, để nguyên bản gốc.

Answer 2

Vì chỉ có sự khác biệt nhỏ, tôi khuyên bạn nên có khả năng đầu tiên của bạn, vì vậy hãy tạo một trình kết xuất cho cả hai trường hợp.

Thêm vào từng trường đối tượng JSON tương ứng (cho các nhóm, bài viết e.t.c) bao gồm trường cho các phần tử trống và đặt thành đúng, ví dụ: isNew = true. Nếu bạn làm như thế này, bạn có thể sử dụng cùng một trình thay đổi cho tất cả các phần tử.

Các thông tin cần thiết cho bản cập nhật nằm trong đối tượng JSON và nếu bạn phải tạo một phần tử mới, chỉ cần kiểm tra cờ isNew. Sau khi thêm nó, đặt cờ thành false và bạn có thể xử lý nó như một trong những cái hiện có.