javascript - 如何在不实际使用样式组件的情况下复制样式组件中的“as”道具？

Question

考虑下面的代码，

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``

此代码按预期工作，并呈现通过“as”道具传递给它的适当组件。

我想知道如何在不实际使用 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>)
}

但这没有用。我在这里做错了什么？

标签： javascriptreactjs