javascript - 从 Google Font API 向 DOM 添加 Google 字体样式 - React

Question

我正在使用 Draftjs 创建一个文本编辑器，并希望有一个下拉字体选择菜单。我已使用axios请求成功获取数据，并已使用componentDidMount反应生命周期方法将数据添加到我的组件状态。我已将字体名称映射到<li>下拉菜单中的标签。

到目前为止一切顺利，我有数据。我想要发生的是，当从下拉菜单中单击字体选项时，该字体将应用于文本（目前更改所选文本并不重要，我只想让它工作，即使整个doc受到影响）。我尝试link使用数据中的 url 向 DOM 添加标签，但格式错误：

const link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = font.files.regular;
document.head.appendChild(link);

font.files.regular 属性包含一个链接到 Google Font API 的 url，但它的 MIME 类型是font/ttf并且我需要text/css. 我读到要使用font/ttf我必须使用该属性创建一个 CSS 类，@font-face但我不确定如何执行此操作，然后将其与文本一起添加到 DOM 元素中。

上面的代码也感觉不是很“反应”，我尝试使用React.createElement()但是当我尝试 appendChild()它时抛出一个错误，说我创建的元素不是 DOM 元素。一些关于如何使这项工作的建议将不胜感激。

ps 我尽量不要上传太多代码，因为这是我最终的 uni 项目的一部分，并且我已被警告不要公开代码，因为它可能被视为抄袭（即使它是我的代码......）。我不是在寻找一个完美编码的答案，只是朝着正确的方向点头

标签： javascriptreactjsdommimedraftjs