如何将道具传递给来自不同来源的组件？

Posted 2023-02-23

【中文标题】如何将道具传递给来自不同来源的组件？

【英文标题】：How can I pass props to components from different sources?

【发布时间】：2020-02-09 08:46:29

【问题描述】：

我有一个组件

<Box/>

我想将来自不同来源的道具传递到这个数组中。问题是，每次我映射这两个函数并将它们的值传递给组件时，它都会使组件为每个源单独渲染，从而使组件渲染的次数比我想要的多。

例如我就是这样做的

return summaryData.map((item, i) => 
         const  name, number  = item
         return tableData.map((item, i) => 
          const  row, column  = item
            return <Box key=i name=name number=number row=row column=column/>
        )
     )

盒子渲染每个函数单独运行的次数，但我希望两个函数同时运行并将数据传递给盒子组件

【参考方案1】：

在您的代码中，我发现您想以相同的顺序映射summaryData 和tableData 的属性，对吗？我假设它们是对象列表。你可以试试这个：

return summaryData.map((item, i) => 
         const  name, number  = item
         return <Box key=i name=name number=number row=tableData[i].row column=tableData[i].column/>
        )
     )

希望它有效。

【参考方案2】：

您可以像下面这样加入两个数组并映射一次。

return summaryData.reduce((acc,name,number,index) => 
  acc.push(
    name,
    number,
    row: tableData[index].row, //assuming you want value from the same index
    column: tableData[index].column )
  return acc;
,[])
.map((name,number,row,column,i) => (<Box key=i name=name number=number row=row column=column/>));