Блог

Рассмотрим приведенный ниже код,

 import React from 'react';
import * as MuiIcons from '@material-ui/icons'
import styled from 'styled-components'

const icons = ['Add', 'Check', 'BlurOn']

export default function App() {
    return icons.map(icon => <Icon as={MuiIcons[icon]}/>)
}
const Icon = styled.div``
 

Этот код работает должным образом и отображает соответствующий компонент, который передается в него через реквизит «как».

Мне было интересно, как воспроизвести это поведение, фактически не используя библиотеку styled-components.

Я попробовал следующее:

 import React from 'react';
import * as MuiIcons from '@material-ui/icons';

const icons = ['Add', 'Check', 'BlurOn']

export default function App() {
    return icons.map(icon => <div>{MuiIcons[icon]}</div>)
}
 

Но это не сработало. Что я здесь делаю не так?