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

Question

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

中的冻结对象中

{
    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 文件中的 classes），ReactJS 转义 html 符号（XSS）。我知道我可以使用 dangerouslySetInnerHTML 来绕过安全性 - 但在这种情况下有更好的方法吗？

Answer 1

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

的需要

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

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

Answer 2

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

将 selTarget 中的项目拆分为 space 分隔的单词。
使用 map 使每个单词成为将单词包装在 span 标签中的反应元素。另外适当地添加 spaces 以供以后在每个元素中使用。
使用此列表将自定义字体元素作为 jsx 元素 (<i class='xwing-miniatures-font xwing-miniatures-font-hit'></i>) 插入适当索引处。
将此数组包装在 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>
);

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

How to use custom font special symbols in object properties used in React Component

fonts

reactjs