如何向react-big-calendar 事件添加图标？

Question

我正在使用 React Icons 和 React-big-calendar。 我成功地通过 API 渲染日历来填充日期、时间和事件标题。 我想用图标补充标题。 我已经安装了 React Icons 并且可以渲染这样的图标：

<FaCircleCheck />

等。

我想从 API 返回标题中的相应图标，并将其呈现为

title <icon />

。 API 成功返回标题本身，并在标题字段中包含适当的图标代码。 我的问题是它渲染图标文本，但不渲染图标本身，如下所示：

This is the Title <FaCircleCheck />

我一定缺少一些基本的东西，或者我可能需要使用 titleAccessor 功能，但不知道如何实现这一点。

谢谢！

Answer 1

您的 API 是否以

This is the Title <FaCircleCheck />

的格式返回事件标题？如果是，即使您可以让它工作，我通常也会建议不要使用这种方法，因为可能会受到注入攻击。

相反，一种方法是让 API 在单独的字段中返回图标名称，然后使用白名单方法将其映射到匹配的图标组件。您可以使用

components

的

Calendar

属性为事件内容指定渲染器，该渲染器可以解析图标名称并根据该名称渲染图标。

您可以在此处开始使用

components

属性：https://jquense.github.io/react-big-calendar/examples/index.html?path=/docs/examples--example-8

上页引用的源代码：https://github.com/jquense/react-big-calendar/blob/master/stories/demos/exampleCode/rendering.js