如何在 React 组件中使用的对象属性中使用自定义字体特殊符号

Question

我正在将自定义字体 ( https://github.com/geordanr/xwing-miniatures-font ) 用于生成棋盘游戏信息的 React 应用程序。 我将使用的数据存储在位于单独类中的冻结对象中：

{
    TIELN: {
        name: "Tie-Fighter",
        initiative: 2,
        shields: 0,
        hull: 3,
        attack: 2,
        agility: 3,
        id: "TIELN",
        selTarget: ["Nearest enemy ship in your firing arc.", "Nearest enemy ship."],
    },
    TIEIN: {
        name: "Tie-Interceptor",
        initiative: 2,
        shields: 0,
        hull: 3,
        attack: 3,
        agility: 3,
        id: "TIEIN",
        selTarget: ["Nearest enemy ship in your firing arc.", "Nearest enemy ship."]
    },
    TIESA: {
        name: "Tie-Bomber",
        initiative: 2,
        shields: 0,
        hull: 6,
        attack: 2,
        agility: 2,
        id: "TIESA",
        selTarget: ["Locked enemy ship at range 1-3", "Nearest enemy ship in your firing arc.", "Nearest enemy ship."]
    }...

我需要使用自定义字体中的特殊符号在存储在对象值中的文本中显示（例如selTarget ）。 我知道我可以用来实现的唯一方法是使用 HTML 标签（字体的作者建议使用包含在 .css 文件中的类），ReactJS 会转义 html 符号（XSS）。 我知道我可以通过使用dangerouslySetInnerHTML来绕过安全性 - 但是在这种情况下有更好的方法吗？

Answer 1

ReactHtmlParser库在这里可能对您有所帮助。 它的工作原理是将每个元素、属性、文本节点和内联样式转换为相应的 React 组件。 它的一个主要优点是它避免了可怕的需要dangerouslySetInnerHTML 。

React render()函数中的示例用法：

render() {
  const html = TIESA.selTarget[0];
  return <div>{ ReactHtmlParser(html) }</div>;
}

Answer 2

实现它的一种方法可能是-

1. 将selTarget的项目selTarget为空格分隔的单词。
2. 使用 map 使每个单词成为将单词包装在span标签中的反应元素。 另外适当地添加空格以供以后在每个元素中使用。
3. 使用此列表在 apt 索引处插入自定义字体元素作为 jsx-element( <i class='xwing-miniatures-font xwing-miniatures-font-hit'></i> )。
4. 将此数组包装在p标签内为<p>{selTargetWordsArray}</p> 。

你有它 - 一个带有不同单词的短语和自定义字体交织在一起，没有dangerouslySetInnerHTML 。

Answer 3

最后，我最终创建了一个链接到包含完全形成的 html 代码的组件的开关，但是如果我需要扩展代码，使用 g_param 在他的回答中建议的库可能是有意义的。

export default function ShipActions(props) {
    switch (props.shipId) {
        case Ships.TIEIN.id:
            return <TIEIN/>;
        case Ships.TIELN.id:
            return <TIELN/>;
        case Ships.TIESA.id:
            return <TIESA/>;
        case Ships.VT49.id:
            return <VT49/>;
        default:
            console.log("Component ShipActions didn't recognize shipId: " + props.shipId);
    }
}

const TIELN = () => (
    <ol>
        <li>Remove 1 stress token or take <i className="xwing-miniatures-font xwing-miniatures-font-crit"/> action.</li>
        <li><i className="xwing-miniatures-font xwing-miniatures-font-barrelroll"/> to avoid target's firing arc and
            still have it in your firing arc.</li>
        <li><i className="xwing-miniatures-font xwing-miniatures-font-barrelroll"/> to get target in your firing arc.</li>
        <li><i className="xwing-miniatures-font xwing-miniatures-font-focus"/> if you have target in your firing arc.</li>
        <li><i className="xwing-miniatures-font xwing-miniatures-font-barrelroll"/> to avoid target's firing arc.</li>
        <li><i className="xwing-miniatures-font xwing-miniatures-font-evade"/></li>
    </ol>
);