Question

我正在尝试将一个将2/3转换为⅔（&frac23;）的函数转换为动态，并使用react将其返回到输入值。

这是我到目前为止所做的：

toFraction(str) {
    // Convert string '2/4' into '&frac24;
    return newStr     // &frac24;
}

<input type="text" value={this.toFraction(quantity)} />

但是，react会将html代码渲染为字符串而不是实际分数。

有没有办法将dangerouslySetInnerHTML用于输入值？

任何帮助都会很棒，谢谢！

Answer 1

假设您使用的是utf-8编码，则可以避免使用&frac23;，只需插入⅔，¼或您需要的任何字符，而无需进行字符编码。

这意味着您可以避免危险地设置HTML，因为字符串将是正确的值字符串。

以下是React的JSX问题文档：https://facebook.github.io/react/docs/jsx-gotchas.html。 “有很多方法可以解决这个问题。最简单的方法是直接在JavaScript中编写Unicode字符。你需要确保文件保存为UTF-8并且设置了正确的UTF-8指令，以便浏览器将正确显示它。“

Answer 2

这实际上是"JSX Gotchas" in the React docs之一。

如果要在动态内容中显示HTML实体，则会遇到双重转义问题，因为React会转义您正在显示的所有字符串，以便在默认情况下防止大范围的XSS攻击。

它提供了三种可能的解决方案：

只使用UTF-8字符，而不是实体。 <div>⅔</div>
使用corresponding unicode number for the entity：<div>{'stuff \u224C more stuff'}</div>或String.fromCharCode(someNum)。
最危险的是，您可以使用dangerouslySetInnerHTML属性：<div dangerouslySetInnerHTML={{__html: '&frac24;'}} />

将变量中的html返回到react <input />

2 个答案: