ReasonReact unsafe string转element：自定义mark函数转义问题求助

你遇到的情况完全是React的安全设计导致的——ReasonReact.stringToElement会自动转义所有HTML特殊字符，防止注入恶意代码。但如果你确定要渲染的内容是安全可信的，确实需要用不安全的方式绕过这个转义，也就是React原生的dangerouslySetInnerHTMLAPI，在ReasonReact里也有对应的用法。

具体实现步骤 #

1. 先保留你已经写好的mark函数，它负责生成带<mark>标签的字符串：

let mark = (str: string, sub: string): string => {
  let re = Js.Re.fromString("(" ++ sub ++ ")");
  Js.String.replaceByRe(re, "<mark>$1</mark>", str);
};

2. 在ReasonReact组件中，使用dangerouslySetInnerHTML来渲染处理后的字符串。你需要创建一个包含__html字段的对象，把处理后的字符串赋值给它，然后传递给元素的属性：

[@react.component]
let make = () => {
  let originalStr = "这是一段包含特定子串的文本，比如这个子串";
  let markedStr = mark(originalStr, "子串");
  
  <div dangerouslySetInnerHTML={"__html": markedStr} />;
};

重要提醒 #

这个方法之所以叫「dangerously」，就是因为它会直接解析并渲染传入的HTML内容。一定要确保你传入的字符串是完全可信的——如果内容来自用户输入或者不可信的数据源，很容易引发XSS攻击，造成安全风险。

内容的提问来源于stack exchange，提问作者Mateus Felipe