Я создаю текстовый редактор с использованием черновика js и хотел бы иметь раскрывающееся меню выбора шрифта. Я успешно получил данные с помощью запроса axios и использовал метод жизненного цикла реакции componentDidMount, чтобы добавить данные в состояние моего компонента. В раскрывающемся меню я сопоставил имена шрифтов с тегами <li>.
Пока все хорошо, у меня есть данные. Я хочу, чтобы при выборе опции шрифта в раскрывающемся меню этот шрифт применялся к тексту (в данный момент не важно, чтобы выбранный текст был изменен, я просто хочу, чтобы он работал, даже если весь do c затронуто). Я попытался добавить тег link в DOM с URL-адресом из данных, но он имеет неправильный формат:
const link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = font.files.regular;
document.head.appendChild(link);
Свойство font.files.regular содержит URL-адрес, связанный с Google Font API, но это MIME-тип font/ttf и мне нужно text/css. Я прочитал, что для использования font/ttf мне нужно создать класс CSS со свойством @font-face, но я не уверен, как это сделать, а затем добавить его к элементу DOM с текстом.
Кроме того, приведенный выше код не выглядит очень «Reacty», я пытался использовать React.createElement(), но когда я пытался appendChild(), он выдавал ошибку, говорящую, что созданный мною элемент не был элементом DOM. Некоторые советы о том, как заставить это работать, были бы очень благодарны.
ps Я стараюсь не загружать слишком много кода, так как это часть моего финального унив-проекта, и меня предупредили о том, чтобы сделать код опубликованным c, так как это может рассматриваться как плагиат (хотя это мой код ...). Я не ищу идеально закодированный ответ, просто кивок в правильном направлении