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

Question

根据 React 的文档：

一种常见的模式是创建几个无状态组件 渲染数据，并在层次结构中在它们之上有一个有状态的组件 通过 props 将其状态传递给其子级。

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

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

如果可能，另一种方法是让每个组件管理自己的状态。我尝试编写我自己的 DropdownList 的极简版本（请注意 CSS ..），它使用有状态列表。一个关于 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 包含有关该主题的更深入讨论。