react.js 使用 dangerouslySetInnerHTML 属性带来高亮

`dangerouslySetInnerHTML` 是 React 中一个有点危险的属性，它允许你将一个字符串作为 HTML 插入到 React 组件中。它的名称“危险地设置InnerHTML”（dangerouslySetInnerHTML）就是为了提醒你这个属性可能带来的潜在风险。

使用 `dangerouslySetInnerHTML` 属性可以在 React 组件中插入一段 HTML 代码，这段代码会被 React 直接渲染出来。如果你想在这段 HTML 代码中高亮某些关键字，可以使用一些第三方库比如 `highlight.js` 来实现。

例如，你可以在 React 组件中定义一个 `div`，并将 `dangerouslySetInnerHTML` 属性设置为包含高亮代码的 HTML 字符串：

import React from 'react';
import hljs from 'highlight.js';

const HighlightedCode = ({ code }) => {
  const highlightedCode = hljs.highlightAuto(code).value;
  return (
    <div dangerouslySetInnerHTML={{ __html: highlightedCode }} />
  );
};

export default HighlightedCode;

在这个例子中，我们使用了 `highlight.js` 库来高亮代码。`highlightAuto` 方法可以自动检测代码的语言类型并进行高亮处理。最后，我们将高亮处理后的代码通过 `dangerouslySetInnerHTML` 属性插入到了 React 组件中。

需要注意的是，使用 `dangerouslySetInnerHTML` 属性时需要格外小心，避免 XSS 攻击等安全问题。如果你不确定是否应该使用这个属性，可以考虑使用其他更安全的方法来实现同样的效果。