请教一下 react JSX 语法如何单独使用标签呢？例如 单独一个 `<h1>`，没有 `</h1>`

[morri]

现在的需求是这样的，文章的每一句在数据库中都是 按单条进行存放的。（ en 为英文、zh 为中文，想要实现每个句子都可以进行翻译并可以修改）

数据表 demo 如下

id	type	zh	en
1	ulb-lib-span	发帖提示	demo
2	span	请在标题中描述内容要点。	demo2
3	lie-span	如果一件事情在标题的长度内就已经可以说清楚，那就没有必要写正文了。	demo3
4	lib-span	正文	demo4
5	span	可以在正文中为你要发布的主题添加更多细节。	demo5
6	lie-span	V2EX 支持 GitHub Flavored Markdown 文本标记语法。	demo6
7	ule-li-span	选择节点	demo7

ulb-lib-span 意思就是 <ul><li><span>内容</span> 这里只有开标签没有闭标记，因为后面还要拼接

span 则为 <span>内容</span>

lie-span 则为 <span>内容</span></li>

b 就是 begin, e 就是 end

现在获取到数据后，需要将句子渲染成 html ，同时还需要可以对每一个单独的数据进行修改。

在 JSX 语法中，可以渲染成字符串，使用 react 的 <div dangerouslySetInnerHTML={{__html: sentence}}></div>，但是如果这样的话，就无法选择具体的单个句子进行修改了。因为在字符串中无法调用 函数组件中的方法。

如何才能实现上面这种需求呢？让标签可以单独使用，或者还有其他什么方式实现吗？

[codehz]

显然通过拼接 html 的形式思路就不对（
你可以考虑把数据库里的数据提取成一个数组，然后 map 成单独的组件（就像列表渲染那样
啊🤔️实际上就是列表渲染吧，只是每个元素可以是异构的而已

[morri]

@codehz 就是后端先处理好数据，这边直接遍历渲染对吧。谢谢～ 我想想呢。

[phithon]

当你发现一个东西不好实现的时候，一般就是设计有问题。。。如果设计不好改，那只能让后端渲染了

[morri]

@phithon 有道理，请问这种需求如何设计一下比较好呢？

[neutrino]

自己实现一个可视化编辑器的意思，如果每个标签还要加格式更烦

[mikasa1024]

设计上来说，type 字段中使用 [ html 标签名称 + b e 字母 ] 来控制标签闭合，确实会增加开发难度。
从后端看，一般有这种这种需求，我会使用树结构保存，增加一个 pid 字段，构建父子关系，然后 type 字段只保存 html 标签名称
前段渲染动态标签，可以使用 createElement api ，https://react.dev/reference/react/createElement