React js 不将“<a href...”显示为 link

Question

Click on <a href='https://test.com' target="_blank">https://test.com</a>
        2. Select data
            2.1 Filter by Database Name
            2.5 Click Save
        3. Select DB
            3.1 Check Primary

我正在发送来自数据库的上述字符串数据进行反应，它显示在 'pre' tag.But 中，字符串中的 href link 没有显示为link.it 显示的是完整的文本。如何在 pre 标签内显示 link？

Answer 1

请考虑在 React 中使用 dangerouslySetInnerHTML 属性。

function createMarkup() {
return {__html: 'First &middot; Second'};
}

function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}

欲了解更多信息，请访问：https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

当您想要显示来自数据库的原始数据时，还要考虑 XSS 攻击。

Answer 2

使用dangerouslySetInnerHTML.

如果你只传递一个普通的字符串给React render函数，由于XSS漏洞，它默认被当作一个普通的字符串处理，这也是为什么创建一个单独的prop专门用来注入innerHTML到提醒开发者注入 HTML 是危险的。

这是一个工作示例：

class Pre extends React.Component {
  render(){
    return React.createElement(
      'pre',
      {
        dangerouslySetInnerHTML: {
          __html: `Click on <a href='https://test.com' target="_blank">https://test.com</a>
        2. Select data
            2.1 Filter by Database Name
            2.5 Click Save
        3. Select DB
            3.1 Check Primary`
        }
      },
      null
    );
  }
}

ReactDOM.render(
  React.createElement(Pre, null, null),
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

React js 不将“<a href...”显示为 link

React js not displaying '<a href...' as a link

css

href

reactjs