下拉框本身就是一个完整的组件，跟react自定义组件不是一回事，那么举一个例子，toast提示框。
关于toast，几乎在每个网页多个地方都可能出现，而且提示的文本也不一样，一般程序员会觉得toast的显示和隐藏应该是内部state来控制，因为它需要全局多处复用。
那么我就分享一下用reducer来管理toast的state的方式。
1、写一个toast无状态组件，组件内部只是个纯JSX，没有任何的state。
export class Toast extends Component {
render () {
const { text } = this.props
return (
<div><span>{text}</span></div>
)
}
}
2、定义一个action来控制toast的状态，toast分为显示和隐藏2种状态。
exprots const toastAction = (bool, toastText) => {
//传入一个bool值，来控制toast的显示和隐藏,传入一个显示的文字内容
return {
type: "TOAST_ACTION",
bool,
toastText
}
}
3、在reducer定义组件的初始状态
const initState = {
toast: false //初始为false，组件隐藏状态,
toastText: null
}
exports const global = (state = initState, action) => {
switch(action.type) {
case "TOAST_ACTION":
return {
...state,
toast: action.bool,
toastText: action.toastText
}
}
}
4、在父容器调用组件
render() {
const { toast, toastText } = this.props.global
return (
<div>
//这里导入你的其他组件
//toast组件默认导入进来，然后根据toast的外部state状态来判断是否显示toast组件，并且传入一个文本，最好的办法是把他放到全局container来，只需要导入一次组件即可。
{
toast ? <Toast text={toastText} /> : null
}
</div>
)
}
4、触发action显示toast，在你的button或者其他按钮事件来触发即可。无论你在哪个页面，都可以触发这个组件。
handleClick () {
this.props.toastAction(true, "登录成功")
}
5、用redux框架的一个基本的toast提示框，我写的这个组件不完美，因为toast组件还需要传入时间，还有到时卸载组件发送一个this.props.toastAction(false)请求。
基本原理就是这样，如果你对redux不熟悉，就会觉得这样很麻烦，但是当你的项目变的庞大，并且多人一起开发的时候，redux的优势就出来了，每个开发人员都遵循这样的数据流，直接this.props.action来改变组件的状态，就能调用组件了。如果一个页面需要多个地方调用同一个组件，那么可能需要在reducer存入当前显示组件的id，也就是用数组来保存状态。在多个下拉弹出框的业务场景就会用到数组保存状态。
话说你能想到的大部分场景，我都已经用redux实现了，因为只要理解了redux怎么回事，那么无论你是什么组件，什么特效，都是用这个原理步骤去写代码，这是从前端工程的角度去管理一个项目。
有兴趣的话可以探讨其他组件模型的实现，搜索框、文本框、按钮、卡片、日历、分页列表、导航等等。。好吧，日历我还没做过，用原生的日历。。
