test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:39:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: 用 dangerouslyHTML 代替 innerHTML 以使 tpl 中的标签有 diff 优化 (#5291)

Browse Source 
* fix: 用 dangerouslyHTML 代替 innerHTML 以使 tpl 中的标签有 diff 优化

* fix: 更新快照

Co-authored-by: shijieyang <shijieyang@baidu.com>
This commit is contained in:
ShiJieyang 2022-09-09 10:44:12 +08:00 committed by RUNZE LU
parent 8fd5eef828
commit 61d1a0d17a
2 changed files with 71 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
packages/amis/__tests__/renderers/__snapshots__/Page.test.tsx.snap
View File

@ -23,9 +23,13 @@ exports[`Renderer:Page 1`] = `
<span
className="cxd-TplField"
>
<span>
This is Title
</span>
<span
dangerouslySetInnerHTML={
Object {
"__html": "This is Title",
}
}
/>
</span>
<div
className="cxd-Remark cxd-Remark--warning"
@ -50,9 +54,13 @@ exports[`Renderer:Page 1`] = `
<span
className="cxd-TplField"
>
<span>
This is SubTitle
</span>
<span
dangerouslySetInnerHTML={
Object {
"__html": "This is SubTitle",
}
}
/>
</span>
</small>
</div>
@ -62,9 +70,13 @@ exports[`Renderer:Page 1`] = `
<span
className="cxd-TplField"
>
<span>
This is toolbar
</span>
<span
dangerouslySetInnerHTML={
Object {
"__html": "This is toolbar",
}
}
/>
</span>
</div>
</div>
@ -74,9 +86,13 @@ exports[`Renderer:Page 1`] = `
<span
className="cxd-TplField"
>
<span>
This is body
</span>
<span
dangerouslySetInnerHTML={
Object {
"__html": "This is body",
}
}
/>
</span>
</div>
</div>
@ -979,9 +995,13 @@ exports[`Renderer:Page initApi reFetch when condition changes 1`] = `
<span
className="cxd-TplField"
>
<span>
The variable value is 1
</span>
<span
dangerouslySetInnerHTML={
Object {
"__html": "The variable value is 1",
}
}
/>
</span>
</div>
</div>
@ -1006,9 +1026,13 @@ exports[`Renderer:Page initApi reFetch when condition changes 2`] = `
<span
className="cxd-TplField"
>
<span>
The variable value is 2
</span>
<span
dangerouslySetInnerHTML={
Object {
"__html": "The variable value is 2",
}
}
/>
</span>
</div>
</div>
@ -1942,9 +1966,13 @@ exports[`Renderer:Page initData 1`] = `
<span
className="cxd-TplField"
>
<span>
The variable value is 1
</span>
<span
dangerouslySetInnerHTML={
Object {
"__html": "The variable value is 1",
}
}
/>
</span>
</div>
</div>
@ -1969,9 +1997,13 @@ exports[`Renderer:Page initFetchOn trigger initApi fetch when condition becomes
<span
className="cxd-TplField"
>
<span>
The variable value is 6
</span>
<span
dangerouslySetInnerHTML={
Object {
"__html": "The variable value is 6",
}
}
/>
</span>
</div>
</div>
@ -1996,9 +2028,13 @@ exports[`Renderer:Page location query 1`] = `
<span
className="cxd-TplField"
>
<span>
The variable value is 5
</span>
<span
dangerouslySetInnerHTML={
Object {
"__html": "The variable value is 5",
}
}
/>
</span>
</div>
</div>
@ -2023,9 +2059,13 @@ exports[`Renderer:Page location query 2`] = `
<span
className="cxd-TplField"
>
<span>
The variable value is 6
</span>
<span
dangerouslySetInnerHTML={
Object {
"__html": "The variable value is 6",
}
}
/>
</span>
</div>
</div>

31
packages/amis/src/renderers/Tpl.tsx
View File

@ -59,24 +59,6 @@ export class Tpl extends React.Component<TplProps, object> {
constructor(props: TplProps) {
super(props);
this.htmlRef = this.htmlRef.bind(this);
}
componentDidUpdate(prevProps: TplProps) {
if (
anyChanged(
['data', 'tpl', 'html', 'text', 'raw', 'value'],
this.props,
prevProps
)
) {
this._render();
}
}
htmlRef(dom: any) {
this.dom = dom;
this._render();
}
getContent() {
@ -100,16 +82,6 @@ export class Tpl extends React.Component<TplProps, object> {
}
}
_render() {
if (!this.dom) {
return;
}
this.dom.firstChild.innerHTML = this.props.env.filterHtml(
this.getContent()
);
}
render() {
const {
className,
@ -125,14 +97,13 @@ export class Tpl extends React.Component<TplProps, object> {
return (
<Component
ref={this.htmlRef}
className={cx('TplField', className)}
style={buildStyle(style, data)}
{...(showNativeTitle
? {title: typeof content === 'string' ? content : ''}
: {})}
>
<span>{content}</span>
<span dangerouslySetInnerHTML={{__html: content}}></span>
</Component>
);
}