React中如何动态命名变量 实现商品列表渲染自动化

错误原因 #

• 你使用的动态挂载变量到window的写法，会被React脚手架默认开启的ESLint no-undef校验规则拦截：编译阶段会检查所有变量是否有显式声明，你运行时才挂载到全局的变量在校验阶段识别不到，直接判定为未定义抛出编译错误。
• 这种全局挂载变量的写法本身存在变量污染、命名冲突的风险，完全不符合React的开发规范，没有必要使用。

正确实现方案 #

你完全不需要动态创建变量，直接使用JavaScript数组的map方法遍历productData数组渲染Product组件即可，后续新增商品只要往productData数组里添加对象，页面会自动渲染对应商品，无需修改其他逻辑。

由于你的productData数组内的对象字段和Product组件接收的属性完全匹配，可以直接用展开运算符{...item}简化属性传递，不用逐个手写属性赋值。

优化后的Home组件代码如下：

import React from 'react'
import Product from './Product'
import './Home.css'
import productData from './ProductDataComponent'

function Home() {
    return (
        <div className='home'>
            <div className="home__container">
                <div className="home__row">
                    {productData.map(item => (
                        <Product 
                            key={item.id}
                            {...item}
                        />
                    ))}
                </div>
            </div>
        </div>
    )
}

export default Home

注：遍历渲染列表时添加key属性是React的强制要求，传入商品唯一的id即可，用于优化列表的渲染性能。

内容的提问来源于stack exchange，提问作者Fabian