多个数据数组会影响性能吗？ ReactJS

Question

我有一个父类，它将把props传递给组件类。这些道具是我从{door, window, carpet, curtain}

导入的数组ProductInformation.js

我似乎已经解决了我的道具未定义的问题。我的逻辑是我传递了<ProductSquare arrayId = {door}/>这将是数组名，然后我调用this.props.arrayId.map会得到undefined的错误，因为{door}显然是未定义的。

我通过将数据导入父类并将各个数组本身传递给子组件类来解决此问题。

我的问题：这是一种传递数组数据的有效方法吗？有更好的逻辑吗？

import {door, window, carpet, curtain} from './ProductInformation2.js'


<Tabs forceRenderTabPanel>
            <TabList>
              <Tab>Front</Tab>
              <Tab>Rear</Tab>
              <Tab>Side</Tab>
            </TabList>
            <TabPanel>
            <div className = 'tabAreaSelected'>
                <ProductSquare arrayId = {curtain}/>
                <ProductSquare arrayId = {door}/>
                <ProductSquare arrayId = {window}/>
                <ProductSquare arrayId = {carpet}/>
                
            </div>
          
</Tabs>

这是我以前的question