React DropdownList - дети с установленным статусом или без гражданства?

Question

По сообщениям РЕАКТА документация:

Общего шаблон является создание несколько лиц без компонентов, которые просто делают данные, и имеет динамическую составляющую над ними в иерархии , которая проходит в состояние своих детей с помощью реквизита.

Давайте возьмем, например, DropDownList и разбить его на более мелкие части:

Применяя РЕАКТ идеологию на DROPDOWNLIST будет означать, что компонент DropDownList управляет состоянием и для всплывающего окна и списка, ответив также к событиям пользовательского интерфейса. Очень хорошую реализацию можно найти здесь http://jquense.github.io/react-widgets/docs/#/dropdown-list (см. Код GitHub).

Другим подходом может быть для каждого компонента управлять своим состоянием, где это возможно. Я попытался написать минималистскую версию моего собственного DropdownList (пожалуйста, помните о CSS ..), который использует список с состоянием. Краткий пример того, как список управляет состоянием:

_onMouseDown: function (index, event) { 

    if(!this.state.data[index].disabled) { 
     this.setState({ 
      selectedIndex: index, 
      focusedIndex: index 
     }); 

     this.props.onSelectedIndexChange(event, index); 
    } else { 
     event.preventDefault(); 
    } 
} 

Вот полный jsfiddle: http://jsfiddle.net/5d30pctd/

Я не буду сравнивать эти два подхода, так как имеют сильные и слабые стороны, а спросить, как потребителям было бы проще повторно использовать: список состояния или списка без учета состояния?

Answer 1

Для сильно повторяющихся компонентов я рекомендую использовать гибридный подход. Если пользователь компонента проходит value и onChange, он становится контролируемым компонентом, и его значение контролируется только свойством value. Если нет value, компонент сохраняет свое состояние. Вот как работают встроенные компоненты формы, такие как <input>. This StackOverflow answer содержит более подробное обсуждение этой темы.