如何将React封装成CustomSelect组件的思路转化为长尾关键词？

本文共计1913个文字，预计阅读时间需要8分钟。

目录+思路和前瞻+编码与实现+处理createContext与useContext+对content的封装和：+DispatchRender+Controls+先说Controls，包含控制行为：+重置+确定+DispatchRender+用于根据type分支发展对应的render子组件

目录

• 思路和前提
• 编码与实现
• 处理createContext与useContext
• 对content的封装和拆分: DispatchRender, Controls
• 先说Controls, 包含控制行: 重置, 确定
• DispatchRender 用于根据type分发对应的render子组件，这是一种编程思想，在次可以保证父子很大程度的解耦，再往下子组件不再考虑type是什么，父组件不需要考虑子组件有什么。
• 单选框的render子组件的具体实现

由来: 需要封装一个通过Popover弹出框里可以自定义渲染内容的组件，渲染内容暂时有: 单选框, 复选框。在封装组件时我们需要权衡组件的灵活性, 拓展性以及代码的优雅规范，总结分享少许经验。

思路和前提

由于考虑组件拆分得比较细，层级比较多，为了方便使用了React.createContext + useContext作为参数向下传递的方式。