React DropdownList - 有状态或无国籍的孩子？

Question

根据React的文档：

  

一种常见的模式是创建几个无状态组件   呈现数据，并在层次结构中具有位于它们之上的有状态组件   通过道具将其状态传递给其子女。

让我们以DropdownList为例，将其分解为更小的部分：

在DropdownList上应用React的意识形态意味着DropdownList组件通过响应UI事件来管理Popup和List的状态。这里可以找到一个非常好的实现http://jquense.github.io/react-widgets/docs/#/dropdown-list（参见GitHub代码）。

另一种方法可能是每个组件在可能的情况下管理自己的状态。我试着写一个我自己的DropdownList的极简主义版本（请介意CSS ..），它使用有状态List。关于List如何管理其状态的简短示例：

_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包含对此主题的更深入讨论。