修复微信小程序React的dangerouslySetInnerHTML无法渲染span标签 #18386
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Walkthrough更新了 inner HTML 标签分类逻辑：在构建 internalCompsList 时过滤掉小写的 'span'，使 isMiniElements 不再包含 'span'。无导出/公共 API 签名变更。 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Dev as App(React)
participant R as Taro Runtime
participant P as InnerHTML 解析器
participant C as 标签分类器
participant V as 宿主视图树
Dev->>R: dangerouslySetInnerHTML({ __html: "<span>...</span>" })
R->>P: 解析 HTML 片段
P->>C: 判定标签类型("span")
Note over C: 'span' 已从 isMiniElements 中移除
alt 标签在 isMiniElements 中
C-->>R: 作为小程序内置组件
R->>V: 创建内置组件节点
else 标签不在 isMiniElements 中 (当前分支)
C-->>R: 作为普通原生元素
R->>V: 创建标准元素节点 <span>…</span>
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (5 passed)
✨ Finishing touches
🧪 Generate unit tests
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/taro-runtime/src/dom-external/inner-html/tags.ts (2)
20-23: 修复方向正确：从 isMiniElements 中排除 span，解锁 dangerouslySetInnerHTML 正常渲染这样会让 span 走 HTML 渲染路径而非被误判为小程序内部组件，符合 PR 目标。建议补充注释与回归用例以防回归。
- 建议在此处加注释，说明为何排除 span（关联 #17747），避免后续合并时误删。可直接应用：
const internalCompsList = Object.keys(internalComponents) .map(i => i.toLowerCase()) - .filter(i => i !== 'span') + // 排除 span：在微信小程序端需将其作为普通内联 HTML 处理，否则 dangerouslySetInnerHTML 会被拦截（见 #17747） + .filter(i => i !== 'span') .join(',')
- 请在 weapp + React 下补一个回归测试：dangerouslySetInnerHTML 注入包含 （含内联样式/嵌套文本）的 HTML，断言 span 及内容正常渲染。
- 若该模块跨端共用，请简单回归其它小程序端（如支付宝/抖音）以确认无副作用。
29-29: 去重小优化：isInlineElements 中 "mark" 出现两次不影响功能，但建议去重，减少维护噪音。
-export const isInlineElements = makeMap('a,i,abbr,iframe,select,acronym,slot,small,span,bdi,kbd,strong,big,map,sub,sup,br,mark,mark,meter,template,canvas,textarea,cite,object,time,code,output,u,data,picture,tt,datalist,var,dfn,del,q,em,s,embed,samp,b', true) +export const isInlineElements = makeMap('a,i,abbr,iframe,select,acronym,slot,small,span,bdi,kbd,strong,big,map,sub,sup,br,mark,meter,template,canvas,textarea,cite,object,time,code,output,u,data,picture,tt,datalist,var,dfn,del,q,em,s,embed,samp,b', true) ```<!-- review_comment_end --> <!-- file_end --> </blockquote></details> </blockquote></details> <details> <summary>📜 Review details</summary> **Configuration used**: CodeRabbit UI **Review profile**: CHILL **Plan**: Pro <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between 8ff04a2cec2f1e25c91ac3687317b90b29d60bcc and 62fc327488fa6d8bf9f52e690b14a51cfdda8777. </details> <details> <summary>📒 Files selected for processing (1)</summary> * `packages/taro-runtime/src/dom-external/inner-html/tags.ts` (1 hunks) </details> <details> <summary>⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)</summary> * GitHub Check: Build Rust Binding / stable - x86_64-unknown-linux-gnu * GitHub Check: Build Rust Binding / stable - aarch64-apple-darwin * GitHub Check: Build Rust Binding / stable - x86_64-apple-darwin * GitHub Check: Build Rust Binding / stable - x86_64-pc-windows-msvc * GitHub Check: Build Rust WASM / stable - wasm32-wasi </details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #18386 +/- ##
=======================================
Coverage 55.97% 55.98%
=======================================
Files 416 416
Lines 21560 21561 +1
Branches 5264 5289 +25
=======================================
+ Hits 12069 12070 +1
+ Misses 7907 7874 -33
- Partials 1584 1617 +33
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
yoyo837
reviewed
Sep 24, 2025
|
|
||
| const internalCompsList = Object.keys(internalComponents) | ||
| .map(i => i.toLowerCase()) | ||
| .filter(i => i !== 'span') |
This was referenced Sep 27, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
这个 PR 做了什么？ (简要描述所做更改)
修复微信小程序React的dangerouslySetInnerHTML无法渲染span标签
这个 PR 是什么类型？ (至少选择一个)
这个 PR 涉及以下平台：
Summary by CodeRabbit
新特性
缺陷修复
其他