React js 不显示“<a href ...”作为链接答案

【问题标题】：React js not displaying '<a href...' as a linkReact js 不显示“<a href ...”作为链接
【发布时间】：2019-09-12 16:24:05
【问题描述】：

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”标签内。但字符串内的 href 链接没有显示为链接。它显示的是完整的文本是.. 如何在 pre 标签内显示链接？

【问题讨论】：

标签： css reactjs href

【解决方案1】：

请考虑在反应中使用dangerouslySetInnerHTML 属性。

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

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

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

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

【讨论】：

【解决方案2】：

使用dangerouslySetInnerHTML。

如果你只传递一个普通字符串给 React 渲染函数，由于 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>

【讨论】：