将 React 组件插入到带有 html 内容的 String 变量中答案

【问题标题】：Insert React component into a String variable with html content将 React 组件插入到带有 html 内容的 String 变量中
【发布时间】：2020-09-17 00:38:04
【问题描述】：

我需要将 React 组件插入到包含 html 内容的 String 变量中。此变量将使用 dangerouslySetInnerHTML 呈现。

我将占位符“！#ShareButton”替换为我的 React 组件的内容，但它呈现的是 [object Object] 而不是组件本身

反应组件：

const ShareThis = ({ text }) => {
  return (
    <div class="one-line">{text}</div>
)}

export default ShareThis

var 内容（带有 html 内容的字符串变量）

<p>Text 1</p>
!#ShareButton
<p>Text 2</p>

页面：

const htmlcontent = content.replace(/!#ShareThis/g,
  <ShareThis
    text="Hello"
  />)

return (
  <div dangerouslySetInnerHTML={{ __html: htmlcontent }} />
)

结果：

Text 1
[object Object]
Text 2

你知道如何将 React 组件插入到带有 html 内容的 String 变量中吗？

【问题讨论】：

标签： javascript html reactjs replace jsx

【解决方案1】：

你不能将 React 组件渲染为 innerHTML，因为它是一个对象，不要混淆 JSX 和 HTML。

要解决它，您需要 content 成为有效的 HTML。

可以通过使 ShareThis 成为一个返回有效 HTML 作为字符串的函数来完成：

const ShareThis = ({ text }) => {
  return `<div class="one-line">${text}</div>`;
};

const content = `
<p>Text 1</p>
!#ShareButton
<p>Text 2</p>
`;

const htmlcontent = content.replace(
  /!#ShareButton/g,
  ShareThis({ text: "Hello" })
);

const App = () => {
  return <div dangerouslySetInnerHTML={{ __html: htmlcontent }} />;
};

请注意，您的正则表达式中有错字：/!#ShareButton/

【讨论】：

【解决方案2】：

我不知道你想用这个解决什么用例，但你可以像这样编辑你的 shareThis 函数以将 html 作为字符串返回以将其用作 innerHtml 稍后：

const ShareThis = ({ text }) => {return (
   `<div class="one-line">${text}</div>`
)}
export default ShareThis

这应该可行..

【讨论】：

【解决方案3】：

另一种可能的选择是使用实用程序React HTML Parser，它可以将 HTML 字符串转换为反应组件 (JSX)。

以 Dennis 提供的示例为基础：

import React from "react";
import ReactHtmlParser from "react-html-parser";

const ShareThis = ({ text }) => {
  return `<div class="one-line">${text}</div>`;
};

const content = `
<p>Text 1</p>
!#ShareButton
<p>Text 2</p>
`;

const htmlcontent = content.replace(
  /!#ShareButton/g,
  ShareThis({ text: "Hello" })
);

export default function App() {
  return <div>{ReactHtmlParser(htmlcontent)}</div>;
}

Working example

【讨论】：