From 9fc20aa728c71f47cc79b9a2c9fcd5a49ffbcded Mon Sep 17 00:00:00 2001
From: 2betop <2betop.cn@gmail.com>
Date: Fri, 25 Sep 2020 14:14:53 +0800
Subject: [PATCH] =?UTF-8?q?tpl=20=E6=94=B9=E6=88=90=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E5=88=B0=E5=86=85=E9=83=A8=20span=20=E4=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scss/components/_tpl.scss | 2 +-
 src/components/Html.tsx   | 6 ++++--
 src/renderers/Tpl.tsx     | 7 ++++---
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/scss/components/_tpl.scss b/scss/components/_tpl.scss
index a2f296018..387360c6a 100644
--- a/scss/components/_tpl.scss
+++ b/scss/components/_tpl.scss
@@ -1,5 +1,5 @@
 .#{$ns}TplField {
   &.is-inline {
-    display: inline;
+    display: inline-block;
   }
 }
diff --git a/src/components/Html.tsx b/src/components/Html.tsx
index 749393115..b5bb2940c 100644
--- a/src/components/Html.tsx
+++ b/src/components/Html.tsx
@@ -50,7 +50,7 @@ export class Html extends React.Component<HtmlProps> {
     const {html} = this.props;
 
     if (html) {
-      this.dom.innerHTML = html;
+      this.dom.firstChild.innerHTML = html;
     }
   }
 
@@ -60,7 +60,9 @@ export class Html extends React.Component<HtmlProps> {
     const Component = wrapperComponent || (inline ? 'span' : 'div');
 
     return (
-      <Component ref={this.htmlRef} className={cx(`${ns}Html`, className)} />
+      <Component ref={this.htmlRef} className={cx(`${ns}Html`, className)}>
+        <span />
+      </Component>
     );
   }
 }
diff --git a/src/renderers/Tpl.tsx b/src/renderers/Tpl.tsx
index 0dedbc7ce..41493765e 100644
--- a/src/renderers/Tpl.tsx
+++ b/src/renderers/Tpl.tsx
@@ -91,7 +91,7 @@ export class Tpl extends React.Component<TplProps, object> {
       return;
     }
 
-    this.dom.innerHTML = this.getContent();
+    this.dom.firstChild.innerHTML = this.getContent();
   }
 
   render() {
@@ -100,10 +100,11 @@ export class Tpl extends React.Component<TplProps, object> {
 
     return (
       <Component
-        children={this.getContent()}
         ref={this.htmlRef}
         className={cx('TplField', inline ? 'is-inline' : '', className)}
-      />
+      >
+        <span>{this.getContent()}</span>
+      </Component>
     );
   }
 }