diff --git a/package.json b/package.json
index cb07771..c21c3c6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kne/markdown-components-render",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "渲染markdown文本，支持components.",
   "syntax": {
     "esmodules": true
@@ -86,6 +86,7 @@
   "dependencies": {
     "@kne/use-ref-callback": "^0.1.2",
     "ajv": "^8.17.1",
+    "html-react-parser": "^5.2.2",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "markdown-it": "^14.1.0"
diff --git a/src/index.js b/src/index.js
index b2dab00..c3af74e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,10 +1,11 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, Fragment } from 'react';
 import markdown from 'markdown-it';
 import mdComponents from './markdown-it-components';
 import compileVariables from './compileVariables';
 import useRefCallback from '@kne/use-ref-callback';
 import merge from 'lodash/merge';
 import preset, { globalParams } from './preset';
+import htmlParser from 'html-react-parser';
 
 const MarkdownComponentsRender = ({ children = '', ...props }) => {
   const { htmlTransform, components = {}, variables = {}, options } = merge({}, globalParams, props);
@@ -38,12 +39,7 @@ const MarkdownComponentsRender = ({ children = '', ...props }) => {
         return <MdComponent {...Object.assign({}, compileVariables(props, variables))} key={index} />;
       }
 
-      return React.createElement(element.tagName.toLowerCase(), {
-        key: index,
-        dangerouslySetInnerHTML: {
-          __html: element.innerHTML
-        }
-      });
+      return <Fragment key={index}>{htmlParser(element.outerHTML)}</Fragment>;
     });
   });