ReactJS：动态更改html / jsx元素

如何解决ReactJS：动态更改html / jsx元素

我想动态更改JSX元素标签，但其余属性保持不变。 假设我有这样的事情：-

import React,{ useState } from 'react'
import classNames from 'classnames'
import { makeStyles } from '@material-ui/core/styles'
import DesktopWindowsIcon from '@material-ui/icons/DesktopWindows'
import DnsIcon from '@material-ui/icons/Dns'
import StorageIcon from '@material-ui/icons/Storage'
import CloudIcon from '@material-ui/icons/Cloud'

export const try = () => {
  const classes = useStyles()
  const [changeIconColor,setChangeIconColor] = useState('')  

  const icons = [
    { id: 0,icon: <DesktopWindowIcon /> },{ id: 1,icon: <DnsIcon /> },{ id: 2,icon: <StorageIcon /> },{ id: 3,icon: <CloudIcon /> },]

  return (
    <>
      {icons.maps(icon => (
        <>
          {/* this will work */}
          {icon.icon}
        </>
      ))}
    </>
  )
}

const useStyles = makeStyles((theme) => ({
  icon: {
    width: 100,height: 100,marginBottom: 12,},iconMouseHover: {
    color: theme.palette.secondary.main
  }
}))

但是我想做的是这样的：-

import React,icon: <DesktopWindowsIcon key={icon.id} className={changeIconColor === icon.id ? classNames(classes.icon,classes.iconMouseHover) : classes.icon} /> },icon: <DnsIcon key={icon.id} className={changeIconColor === icon.id ? classNames(classes.icon,icon: <StorageIcon key={icon.id} className={changeIconColor === icon.id ? classNames(classes.icon,icon: <CloudIcon key={icon.id} className={changeIconColor === icon.id ? classNames(classes.icon,]

  return (
    <>
      {icons.maps(icon => (
        <>
          {/* this will not work since it gave me an error saying icon is not defined in array above */}
          {icon.icon}
        </>
      ))}
    </>
  )
}

const useStyles = makeStyles((theme) => ({
  icon: {
    width: 100,iconMouseHover: {
    color: theme.palette.secondary.main
  }
}))

我有什么方法可以使用React动态地做到这一点吗？ 可以更改图标标签的内容，但其余属性保持不变：-

// only tag name changes
<OnlyThisChange className={changeIconColor === skill._id ? classNames(classes.icon,classes.iconMouseHover) : classes.icon} />

这有可能与之反应吗？

解决方法

是的，这可能。

首先，您不需要在图标组件中编写键。支撑键必须在Fragment元素中定义（-> ）。

您的示例几乎是正确的，您正在做的一个错误是：

changeIconColor === icon.id

代替上面的示例，您可以对ID进行硬编码：

changeIconColor === 1