Лучшая практика: повторное использование компонентов или дублирование писем

Question

Я работаю над администрацией магазина с реагированием, alt и неизменным. Мое предложение объект выглядит более или менее, как это:

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

я перебирать каждую запись и отображение формы редактирования группы, статьи, .... Если что-то изменилось, я вызываю OfferAction и передаю путь, изменил поле и новое значение на объект, например. OfferActions.update([2, 'articles', 5, 'optionGroups'], 'name', 'MyOptionGroup')

Теперь я хочу отобразить ту же форму, но с разными заполнителями и changeHandlers. Если форма заполнена, объект должен быть создан (необходимо вызвать другое OfferAction). Для чего лучше всего это делать?

Я думал о следующих возможностях:

Нажимных пустые элементы на OfferStore состоянии
пустые элементы будут отображаться, как и другие. Мне не нужно дублировать какие-либо компоненты, но мне нужно реализовать несколько проверок, которые необходимо вызывать OfferAction после изменения, заполнители для визуализации и значения, чтобы скрыть, если они отсутствуют. После создания объекта я просто нажимаю еще один пустой элемент на массив предложений.

Создание 2-й компоненты
Я мог бы просто создать второй компонент, который я визуализацию. Я мог бы управлять формой через внутреннее состояние, создавать объект, когда форма заполнена и сбросить состояние. Это приведет к добыче дубликатов jsx.

Есть ли какая-либо передовая практика для архивирования, без дублирования компонента или усложнения других?

Answer 1

Значит, вы просто хотите, чтобы разные заполнители и менялиHandlers?

Установите булевскую опору на компонент верхнего уровня, который необходимо дублировать. Затем для каждого placeholder/changeHandler;

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

Включите someBooleanValue={true} на альтернативные версии, оставить оригиналы как есть.

Answer 2

Потому что есть только небольшие отличия, я бы порекомендовал вам вашу первую возможность, поэтому создайте один рендерер для обоих случаев.

Добавьте к каждому полю соответствующий объект JSON (для групп, статей e.t.c), включая поле для пустых элементов и установите его в true, например. isNew = true. Если вы сделаете это так, вы можете использовать один и тот же сменщик изменений для всех элементов.

Необходимая информация для обновления находится в объекте JSON, и если вам нужно создать новый элемент, просто проверьте флаг isNew. После его добавления установите флаг в false, и вы можете обрабатывать его как один из существующих.