Reactjs 如何向阵列中的每个图标添加样式对象？（反应/材料界面）

我使用的是材质ui图标，我想为下面显示的每个数组对象添加一个不同的图标。如果不向数组中的每个对象图标手动添加样式属性，如何向数组中的每个对象添加“iconStyle”

从“材质ui/图标”导入Icon1
从“材质ui/图标”导入Icon2
//如果我有这样一个数组：
常量数组=[
{name:“test1”，图标：}，//材质ui icon1
{name:“test2”，图标：}，//材质ui icon2
]
//我把它画成这样：
const txtStyle={//css}；
常量iconStyle={//css}
{array.map（arr=>{
回来
{arr.name}
{arr.icon}//如何将iconStyle添加到此元素？
})}
//如何将iconStyle对象添加到person.icon，而不将其手动添加到数组中的每个图标？
//不是这样的：
常量数组=[
{name:“test1”，图标：}，//材质ui icon1
{name:“test2”，图标：}，//材质ui icon2
]有两种方法可以做到这一点

方法1
让你的
图标
接受道具

const arr = [
  { name: "Circle", Icon: (props) => <Icon1 {...props} /> },
  { name: "Shopping", Icon: (props) => <Icon2 {...props} /> }
];

在这种方法中，不需要更改
arr
数组

这是两种方法的工作示例…

有两种方法可以做到这一点

方法1
让你的
图标
接受道具

const arr = [
  { name: "Circle", Icon: (props) => <Icon1 {...props} /> },
  { name: "Shopping", Icon: (props) => <Icon2 {...props} /> }
];

在这种方法中，不需要更改
arr
数组

这是两种方法的工作示例…

您只需引用图标组件，然后在
数组中渲染它。map

const array = [
  {name: "test1", icon: Icon1}, // attention on this line
  {name: "test2", icon: Icon2},
]

const txtStyle = {};
const iconStyle = {};

return (
  <div>
    {array.map(arr => (
      <div>
        <p style={txtStyle}>{arr.name}</p>
        <arr.icon style={iconStyle}/>
      </div>
    )}
  </div>
)

const数组=[
{name:“test1”，icon:Icon1}，//请注意这一行
{name:“test2”，图标：Icon2}，
]
const txtStyle={}；
常量iconStyle={}；
返回(
{array.map（arr=>(
{arr.name}
)}
)
您只需引用图标组件，然后将其渲染到
数组中。map

const array = [
  {name: "test1", icon: Icon1}, // attention on this line
  {name: "test2", icon: Icon2},
]

const txtStyle = {};
const iconStyle = {};

return (
  <div>
    {array.map(arr => (
      <div>
        <p style={txtStyle}>{arr.name}</p>
        <arr.icon style={iconStyle}/>
      </div>
    )}
  </div>
)

const数组=[
{name:“test1”，icon:Icon1}，//请注意这一行
{name:“test2”，图标：Icon2}，
]
const txtStyle={}；
常量iconStyle={}；
返回(
{array.map（arr=>(
{arr.name}
)}
)