Najlepsza praktyka: ponowne wykorzystywanie komponentów lub pisanie duplikatów

Question

Pracuję nad administracją sklepu z reakcją, alt i niezmienną. Moja oferta obiekt wygląda mniej więcej tak:

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

I iteracyjne nad każdą pozycję i wyświetlić formularz do edycji grupy, artykuł, .... Jeśli coś się zmieni, wywołuję OfferAction i przekazuję ścieżkę, zmienione pole i nową wartość podmiotowi, np. OfferActions.update([2, 'articles', 5, 'optionGroups'], 'name', 'MyOptionGroup')

Teraz chcę wyświetlić dokładnie ten sam formularz, ale z różnymi symbolami zastępczymi i zmiennymi komunikatami. Jeśli formularz jest wypełniony, należy utworzyć encję (musi być wywołana inna właściwość OfferAction). Jaka jest najlepsza praktyka, aby to zrobić?

Myślałem o następujących możliwości:

push pusty Elementy na stanie OfferStore
Puste elementy będą wyświetlane jak inni. Nie muszę duplikować żadnych komponentów, ale muszę wprowadzić wiele sprawdzeń, które OfferAction muszą zostać wywołane po zmianie, symbole zastępcze do renderowania i wartości ukryte, jeśli ich brakuje. Po utworzeniu obiektu po prostu wepchnęłbym inny pusty element do tablicy ofert.

Tworzenie 2nd komponent
może po prostu utworzyć drugi składnik, który ja render. Zarządzałbym formularzem poprzez wewnętrzny stan, tworzenie encji po wypełnieniu formularza i resetowanie stanu. Doprowadziłoby to do łupu duplikatu jsx.

Czy istnieje jakaś najlepsza praktyka do archiwizowania tego, bez powielania składnika lub komplikowania innych?

Answer 1

Po prostu chcesz mieć różne symbole zastępcze i zmienne wskazówki?

Ustaw boolean prop na komponencie najwyższego poziomu, który musi zostać zduplikowany. Następnie dla każdego symbolu zastępczego/changeHandler;

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

Dołącz someBooleanValue={true} o alternatywnych wersjach zostawić oryginały jak jest.

Answer 2

Ponieważ istnieją tylko drobne różnice, polecam Ci pierwszą możliwość, więc utwórz jeden renderer dla obu przypadków.

Dodaj do każdego pola odpowiedni obiekt JSON (dla grup, artykułów e.t.c) zawierający pole dla pustych elementów i ustaw go na wartość true, np. isNew = true. Jeśli zrobisz to w ten sposób, możesz użyć tego samego mechanizmu zmian dla wszystkich elementów.

Konieczne informacje o aktualizacji znajdują się w obiekcie JSON, a jeśli trzeba utworzyć nowy element, po prostu sprawdź flagę isNew. Po dodaniu, ustaw flagę na false i możesz obsłużyć ją jak jedną z istniejących.