React js 不'<a href...'显示为链接

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

我正在将来自数据库的上述字符串数据发送到 react，它显示在"pre"标签内。但是字符串中的 href 链接没有显示为 link.it 显示完整的文本。 如何在预标签内显示链接？

Answer 1

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

function createMarkup() {
return {__html: 'First · Second'};
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}

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

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

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