tpl 改成渲染到内部 span 上

scss/components/_tpl.scss

@@ -1,5 +1,5 @@
 .#{$ns}TplField {
   &.is-inline {
-    display: inline;
+    display: inline-block;
   }
 }

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>
     );
   }
 }

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>
     );
   }
 }