Как я могу динамически загрузить значок, используя его имя snake_case (React, material-ui) - PullRequest
Новая
       28

Как я могу динамически загрузить значок, используя его имя snake_case (React, material-ui)

0 голосов
/ 30 мая 2019

Обычно я использовал бы значки Material-UI, импортируя их напрямую в соответствии с инструкциями Material-UI .

Но у меня есть текстовый тег, который является фактическим именем иконки (например, calendar_view_day), и мне нужно динамически получать и отображать компонент иконки.

Как мне что-то наподобие: 

render() {
  return (
    <Icon name="calendar_view_day" color="primary" />
  )
}

Вместо: 

render() {
  return (
    <CalendarViewDay color="primary" />  // Imported by name
  )
}

1 Ответ

2 голосов
/ 30 мая 2019

ОК, так что я серьезно обдумал это.

Правильный ответ

Оказывается material-ui включает в себя компонент значка, который позволяет вам делать это ... и он сам конвертирует имена, поэтому принимает змеи, паскаля и другие варианты. 

import Icon from '@material-ui/core/Icon'

...

render() {
  return (
    <Icon>{props.iconName}</Icon>
  )
}

Предыдущий ответ (рабочий, но массовый перебор)

Создать функцию для:

... Затем используйте компонент Icon-ui.

Вот код: 

import Icon from '@material-ui/core/Icon'

function upperFirst(string) {
  return string.slice(0, 1).toUpperCase() + string.slice(1, string.length)
}

function fixIconNames(string) {
  const name = string.split('_').map(upperFirst).join('')
  if (name === '3dRotation') {
    return 'ThreeDRotation'
  } else if (name === '4k') {
    return 'FourK'
  } else if (name === '360') {
    return 'ThreeSixty'
  }
  return name
}

...

render() {
  const iconName = fixIconNames(props.iconName)
  return (
    <Icon>{props.iconName}</Icon>
  )
}
...