请教一下 react JSX 语法如何单独使用标签呢？例如 单独一个 `<h1>`，没有 `</h1>`
morri · 1211ciel · 2023-05-01 21:08:37 +08:00 · 2181 次点击这是一个创建于 580 天前的主题，其中的信息可能已经有所发展或是发生改变。
现在的需求是这样的，文章的每一句在数据库中都是 按单条进行存放的。（ 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>，但是如果这样的话，就无法选择具体的单个句子进行修改了。因为在字符串中无法调用 函数组件中的方法。
如何才能实现上面这种需求呢？让标签可以单独使用，或者还有其他什么方式实现吗？
 |
1
codehz 2023-05-01 21:18:32 +08:00
显然通过拼接 html 的形式思路就不对（
你可以考虑把数据库里的数据提取成一个数组，然后 map 成单独的组件（就像列表渲染那样 啊🤔️实际上就是列表渲染吧，只是每个元素可以是异构的而已 |
 |
3
phithon 2023-05-02 11:06:53 +08:00  1
当你发现一个东西不好实现的时候，一般就是设计有问题。。。如果设计不好改，那只能让后端渲染了
|
 |
5
neutrino 2023-05-02 13:31:58 +08:00 via Android
自己实现一个可视化编辑器的意思，如果每个标签还要加格式更烦
|
 |
6
mikasa1024 2023-05-02 14:35:20 +08:00
设计上来说，type 字段中使用 [ html 标签名称 + b e 字母 ] 来控制标签闭合，确实会增加开发难度。
从后端看，一般有这种这种需求，我会使用树结构保存，增加一个 pid 字段，构建父子关系，然后 type 字段只保存 html 标签名称 前段渲染动态标签，可以使用 createElement api ，https://react.dev/reference/react/createElement |
Select Language