Javascript React.js：从对象数组渲染组件

我有一个存储在状态中的对象数组，每个对象都存储了我要用于渲染组件的值：

const activeModal = [
    { modalName: 'dashboard', modal: Dashboard, active: true, icon: DashboardIcon, iconColor: 'black', iconBackground: 'white' },
    { modalName: 'memsline', modal: MEMsLine, active: false, icon: MEMsLineIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'mems', modal: MEMsGrid, active: false, icon: MEMsIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'events', modal: Events, active: false, icon: EventIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'people', modal: People, active: false, icon: PeopleIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'places', modal: Places, active: false, icon: PlaceIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'music', modal: Music, active: false, icon: MusicIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'movies', modal: Movies, active: false, icon: MovieIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'tvshows', modal: TVShows, active: false, icon: TVIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'games', modal: Games, active: false, icon: GameIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'settings', modal: UserSettings, active: false, icon: SettingsIcon, iconColor: 'white', iconBackground: 'black' }
]

然后，我创建一个常量来存储数组中的各种组件，如下所示：

const displayButtons = this.state.activeModal.map((item, index) =>
    <div key={index}>
        <ListItem button id={item.modalName} style={{ backgroundColor: { item.iconBackground } }}>
            <ListItemIcon>
                <{item.icon} onClick={this.openModal({ item.modalName })} style={{ color: { item.iconColor } }} />,
            </ListItemIcon>,
        </ListItem>
    </div>
)

如何修改常量以返回所需内容？

您必须将嵌套的react组件“解包”到具有正确react组件名称大小写的局部变量中，即PascalCase

const displayButtons = this.state.activeModal.map((item, index) => {
  const Icon = item.icon; // <-- create local variable with proper react component casing

  return (
    <div key={index}>
      <ListItem button id={item.modalName} style={{ backgroundColor: { item.iconBackground } }}>
        <ListItemIcon>
          <Icon // <-- use local "Component"
            onClick={this.openModal({ item.modalName })}
            style={{ color: { item.iconColor } }}
          />
        </ListItemIcon>
      </ListItem>
    </div>
  );
})

constdisplaybuttons=this.state.activeModal.map（（项目，索引）=>{
const Icon=item.Icon；//定义“努力使其工作”。什么不起作用？描述（各种）故障。请参阅React文档中的“在运行时选择类型”建议：我已更新了我的问题，使其更精确地使用我的“努力”！@Ross-谢谢，所以不要使用
{item.Icon}
我需要声明一个大写的变量并使用它-即
const DisplayModalType=item.icon
const displayButtons = this.state.activeModal.map((item, index) => {
  const Icon = item.icon; // <-- create local variable with proper react component casing

  return (
    <div key={index}>
      <ListItem button id={item.modalName} style={{ backgroundColor: { item.iconBackground } }}>
        <ListItemIcon>
          <Icon // <-- use local "Component"
            onClick={this.openModal({ item.modalName })}
            style={{ color: { item.iconColor } }}
          />
        </ListItemIcon>
      </ListItem>
    </div>
  );
})