如何解决多个bulleted_list_item渲染正确ul与li标签的问题

这种单li独立包裹ul的问题是结构化内容渲染的常见问题，可根据你对数据源的可控程度选择对应处理方案：

方案1：可控上游返回结构时优先调整输出逻辑 #

直接在内容生成/接口返回层增加节点聚合规则：

• 遍历所有内容token时，连续的bulleted_list_item类型节点统一暂存到同一个数组
• 遇到非列表类型节点时，将暂存的列表节点数组整体包装为bulleted_list（即你提到的bulleted_list_items容器类型）后输出
• 渲染层直接按照<ul>对应bulleted_list、<li>对应bulleted_list_item的规则渲染即可

方案2：不可控上游结构时增加前端预处理层 #

如果无法修改上游返回格式，在渲染逻辑前加一层节点归一化处理即可：

1. 初始化两个变量：空的最终节点数组、空的当前列表临时容器
2. 逐个遍历上游返回的所有节点：
   • 若当前节点是bulleted_list_item：
     • 临时容器为空时，先创建bulleted_list类型的容器存入临时容器
     • 将当前bulleted_list_item加入临时容器的子节点数组
   • 若当前节点不是bulleted_list_item：
     • 临时容器不为空时，先将临时容器推入最终节点数组，清空临时容器
     • 将当前非列表节点直接推入最终节点数组
3. 遍历结束后检查临时容器是否有剩余内容，有的话补入最终节点数组
4. 最终按照正常逻辑渲染处理后的节点数组即可

方案3：使用富文本框架自带的归一化能力 #

如果是基于Slate、ProseMirror这类富文本渲染框架实现功能，直接在框架的Schema中配置规则即可自动处理：

• 定义bulleted_list的子节点仅允许为bulleted_list_item
• 配置归一化规则：相邻的独立bulleted_list_item自动包裹bulleted_list容器，相邻的多个bulleted_list自动合并为单个容器，自动删除多余的ul标签，无需手动写遍历逻辑

内容的提问来源于stack exchange，提问作者Adebiyi Adedotun