Блог

Ну, я работаю над проектом с несколькими репо, в котором я сталкиваюсь со следующей проблемой при реализации библиотеки компонентов моего проекта, касающейся выбора значков.

Я создал прототип своих значков в соответствии с желанием проекта, но пришло время для реализации, и я не знаю, как их правильно разместить, поэтому я хотел бы устранить это сомнение.

Изначально я реализовал это так:

 import React from 'react'; import * as Icons from 'my-icons-lib';  function Icon(props: any) {  const IconSettings = {  Name: props.IconName,  Color: props.IconColor,  Height: props.IconHeight,  Width: props.IconWidth  }   const IconSelected = Icons[IconSettings.Name]  return(  lt;IconSelected  {...IconSettings.Color}  {...IconSettings.Height}  {...IconSettings.Width}  /gt; ); }  export default Icon;   

Помимо окончательного проекта, в котором будут использоваться эти компоненты, этот в данном случае будет использоваться для визуализации моего значка в соответствии со значением, переданным реквизитом.iconName, который должен искать в массиве значок, который я хочу использовать.

И когда он получит ответ, он будет использоваться таким образом при окончательной сборке репо:

Если да, используйте phoneIcon для передачи реквизита.Меня зовут.

 lt;PhoneIcon color="#3457f" /gt;  

Однако при попытке сделать это поиск, который будет выполняться const IconSelected = Icons[IconSettings.Name] , не выполняется, потому что, по-видимому, он не может получить доступ к индексу, в котором должно быть найдено значение в этом массиве моей библиотеки значков.

Он даже возвращает ошибку, из-за которой он:

 Binding element 'IconSettings.Name' implicitly has a type 'any'.ts(7031)  

Итак, что я должен сделать, чтобы он мог работать должным образом? Какова хорошая практика для этого?