fix: 修复 tpl 改成异步模版后存在不更新的情况 (#7082)

This commit is contained in:
liaoxuezhi 2023-06-05 14:23:17 +08:00 committed by GitHub
parent f745a4ebb0
commit ceab488860
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -68,7 +68,7 @@ export class Tpl extends React.Component<TplProps, TplState> {
constructor(props: TplProps) {
super(props);
this.state = {
content: this.getContent()
content: ''
};
this.mounted = true;
}
@ -92,29 +92,46 @@ export class Tpl extends React.Component<TplProps, TplState> {
}
@autobind
updateContent() {
const {tpl, html, text} = this.props;
if (html || tpl || text) {
this.getAsyncContent().then(content => {
this.mounted && this.setState({content});
});
}
async updateContent() {
const content = await this.getAsyncContent();
this.mounted && this.setState({content});
}
// @autobind
// getContent() {
// const {tpl, html, text, raw, data, placeholder} = this.props;
// const value = getPropValue(this.props);
// if (raw) {
// return raw;
// } else if (html) {
// return filter(html, data);
// } else if (tpl) {
// return filter(tpl, data);
// } else if (text) {
// return escapeHtml(filter(text, data));
// } else {
// return value == null || value === ''
// ? `<span class="text-muted">${placeholder}</span>`
// : typeof value === 'string'
// ? value
// : JSON.stringify(value);
// }
// }
@autobind
getContent() {
const {tpl, html, text, raw, data, placeholder} = this.props;
async getAsyncContent() {
const {tpl, html, text, data, raw, placeholder} = this.props;
const value = getPropValue(this.props);
if (raw) {
return raw;
} else if (html) {
return filter(html, data);
return asyncFilter(html, data);
} else if (tpl) {
return filter(tpl, data);
return asyncFilter(tpl, data);
} else if (text) {
return escapeHtml(filter(text, data));
return escapeHtml(await asyncFilter(text, data));
} else {
return value == null || value === ''
? `<span class="text-muted">${placeholder}</span>`
@ -124,17 +141,6 @@ export class Tpl extends React.Component<TplProps, TplState> {
}
}
@autobind
async getAsyncContent() {
const {tpl, html, text, data} = this.props;
if (html || tpl) {
return asyncFilter(html || tpl, data);
} else {
return escapeHtml(await asyncFilter(text, data));
}
}
/**
* HTML标签, , HTML标签的title属性
*/