现在的需求是这样的。想做一个英文文章阅读的网站，文章当中的每一句话都可以点击句末的上标翻译，然后句子的下面就显示中文。当然还可以点击句末的修改按钮修改这句话。

现在遇到一个问题，就是文章可以由段落或列表组成， 一个段落(p)中可能会有多个句子(span)，我现在想的是将文章的所有句子都存放在表中，根据不同的类型来判断这个句子在渲染成 html 时，应该使用哪些标签。

例如句子的类型可以是

• pb-span, 在渲染时则是这样 <p><span>内容</span>
• pe-span, 渲染时则是 <span>内容</span></p>
• ulb-lib-span, 渲染时则是 <ul><li><span>内容</span>
• ule-lie-span, 渲染时则是 <span>内容</span></li></ul>

b 就是 begin ，e 就是 end

现在数据库中的 sql 是这样的

create table en_article_sentence
(
    id         bigint unsigned auto_increment
        primary key,
    article_id bigint                             not null,
    type       varchar(64)                        not null,
    en         text                               null,
    zh         text                               null,
    audio      varchar(64)                        null,
    created_at datetime default CURRENT_TIMESTAMP null,
    updated_at datetime default CURRENT_TIMESTAMP null
);

前台使用的是 react ，react 语法使用的是 JSX ，JSX 在使用 html 标签时，必须成对出现，所以在渲染时就不好处理了。

如果我使用 <div dangerouslySetInnerHTML={{__html: sentence}}></div> 这种方式来渲染 html ， 那么就不能调用函数组件中的方法，进行修改。 如果直接根据type 类型来判断，html 标签又必须成对出现。

这篇帖子描述了 现在的困境 https://www.v2ex.com/t/936765

有 v 友说这样设计不太好，所以想要请教一下，要如何设计才能比较好的实现我上述的需求呢？