如何在具有组件的 React JS 中呈现字符串？

Question

我有一个字符串，想在 React JS 中呈现它

const htmlString = "<h1>
<Ref description=\"Magic may or may not be happening\"> hello magic</Ref></h1>"
return ( <div> <h1>
{htmlString}</h1>
 </div\>)

我可以在 React js 中渲染这个 htmlString 请帮忙！

Answer 1

您可以使用 react-html-parser 来实现此目的

import React from 'react';
import ReactHtmlParser from 'react-html-parser';
 
class HtmlComponent extends React.Component {
  render() {
    const html = '<div>Example HTML string</div>';
    return <div>{ ReactHtmlParser(html) }</div>;
  }
}

查看文档 here

Answer 2

您可以在 html 元素上使用 dangerouslySetInnerHTML 属性将字符串设置为 HTML。但是要知道，在 React 中像这样设置 HTML 是有风险的，因为这可能会使您的用户面临 cross-site 脚本（XSS）攻击。要了解有关如何使用它的更多信息，请参阅官方 React 文档： https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

在下方张贴示例 use-case 以了解如何使用它。

function App() {
  
  function getMarkup() {
    return {__html: '<h3>My Content here..</h3>'}; // The HTML string you want to set
  }

  return (
    <div className="App">
      <div dangerouslySetInnerHTML={getMarkup()}></div>
    </div>
  );
}

如何在具有组件的 React JS 中呈现字符串？

How can I render a string in React JS which has components?

javascript

reactjs

string

jsx

render