javascript - 如何将 props 传递给来自不同来源的组件？

Question

我有一个组件

<Box/>

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

比如我就是这样做的

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

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

Answer 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}/>
        })
     })

希望它有用。