React中如何详细设计CustomSelect组件封装策略？

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

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

目录

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

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