javascript - React.js : Rendering Components from Array of Objects

Question

我有一个对象数组，我将其存储在状态中，每个对象存储我想要用来渲染组件的值:

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

然后我可以调用常量 {displayButtons}作为我的 return 的一部分.但是，这种方法目前不起作用。
我的代码无法编译，因为从数组返回属性时会出现各种解析错误 - 例如item.icon背景。
对于 Array 中的第一个对象，我要实现的目标如下所示:

    <div key=0>
        <ListItem button id='dashboard' style={{ backgroundColor: 'white' }}>
            <ListItemIcon>
                <DashboardIcon onClick={this.openModal('dashboard')} style={{ color: 'black' }} />,
            </ListItemIcon>,
        </ListItem>
    </div>

我怎样才能修改我的常量以返回我所追求的？

Answer 1

您必须将嵌套的 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>
  );
})

您可能需要对 item.modalName 执行相同的操作。传递给 this.openModal回调处理程序。