现在的需求是这样的。想做一个英文文章阅读的网站，文章当中的每一句话都可以点击句末的上标翻译，然后句子的下面就显示中文。当然还可以点击句末的修改按钮修改这句话。
现在遇到一个问题，就是文章可以由段落或列表组成， 一个段落(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 标签又必须成对出现。
这篇帖子描述了 现在的困境 t/936765
有 v 友说这样设计不太好，所以想要请教一下，要如何设计才能比较好的实现我上述的需求呢？
2
Select Language