将React组件插入包含HTML内容的字符串变量中

Question

我需要将一个React组件插入到包含HTML内容的字符串变量中。这个变量将使用dangerouslySetInnerHTML进行呈现。

我用我的占位符"!#ShareButton"替换了React组件的内容，但它呈现的是[object Object]而不是组件本身。

React组件：

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

export default ShareThis

变量 content（包含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内容的字符串变量中吗？

- unairoldan

Answer 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/

- Dennis Vash

Answer 2

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

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

这应该可以运行。

- Mudasir Zahoor

Answer 3

另一个可能的选择是使用实用工具React HTML Parser，它可以将HTML字符串转换为React组件（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>;
}

工作示例

- Juan Marco