如何在 React 中动态命名变量

Question

你好我很新，我正在练习反应。

这个 post 的 TL;DR 是我想在反应中动态地创建一些变量，但我不能。

我正在用 React 做一个商店的网页。因此，为了制作显示产品的主页，我制作了一个 Product 组件，它采用了一些像这样的属性

import React from 'react'


function Product({id,title,image,image_description,price,description}) {
    return (
        <div >
            <div >
                <p>{title}</p>
                <b>{price}$</b>
                <img src={image} alt={image_description}/>
                <p>{description}</p>
            </div>
        </div>
    )
}

export default Product

然后我制作了一个名为“ProductDataComponent”的组件，我在其中创建了一个数组，其中包含一些具有这些属性的对象

var productData = [
// 0
    {
        id : 10,
        title: 'Jugo de Naranja', 
        image: 'urlOfImage.com', 
        image_description: 'Juguito de naranja' , 
        price: 100, 
        description: 'Un rico jugo de naranja'  
    },
//1 
{
  etc
}
];


export default productData

然后我在 home 组件中导入了那个组件，为了让代码更简洁，我做了一些变量，取数组的一个元素

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

var  p0 = productData[0]
var  p1 = productData[1]

function Home() {
    return (
        <div className='home'>
            <div className="home__container">
                <div className="home__row">
                    <Product id={p0.id} title= {p0.title} image={p0.image} image_description={p0.image_description} price={p0.price} description={p0.description}/>
                    <Product id={p2.id} title= {p2.title} image={p2.image} image_description={p2.image_description} price={p2.price} description={p2.description}/>
                </div>
            </div>
        </div>
    )
}

export default Home

至此，代码运行良好。

问题是我想自动生成变量过程，所以我不必每次在 productData 数组中添加新对象时都手动编写。

我搜索了一种方法，找到了两种方法。一个带有 eval() 方法的方法是邪恶的并且不起作用。另一种方法是像这样做一个for循环

var i 
for (let i = 0; i < productData.length; i++) {
    window['p'+i] = productData[i];

}

我在 javascript 中隔离的其他页面测试了这个方法，它有效，但是当我把它放在 react 的 home 组件中时，它不起作用。这是网页显示的内容。

Failed to compile

src\Home.js
  Line 32:34:   'p0' is not defined  no-undef
  Line 32:49:   'p0' is not defined  no-undef
  Line 32:66:   'p0' is not defined  no-undef
  Line 32:95:   'p0' is not defined  no-undef
  Line 32:124:  'p0' is not defined  no-undef
  Line 32:147:  'p0' is not defined  no-undef
  Line 33:34:   'p1' is not defined  no-undef
  Line 33:49:   'p1' is not defined  no-undef
  Line 33:66:   'p1' is not defined  no-undef
  Line 33:95:   'p1' is not defined  no-undef
  Line 33:124:  'p1' is not defined  no-undef
  Line 33:147:  'p1' is not defined  no-undef

我做错了什么吗？有没有办法动态命名变量或使过程自动化？

ps: 我不是英语母语者所以请原谅我的语法错误。

Answer 1

你可以使用 map 和 return jsx:

const rednderedProduct =productData.map( (p)=> {return <Product id={p.id} title= {p.title} image={p.image} image_description={p.image_description} price={p.price} description={p.description}/> })

然后在组件的return部分：

return({rednderedProduct})

类似的东西...

Answer 2

您似乎在寻找一种动态制作 React 元素的方法。这可以使用 map 来完成。查看以下示例：

import productData from './ProductDataComponent'

function Home() {
    return (
        <div className='home'>
            <div className="home__container">
                <div className="home__row">
                    {productData.map(product => <Product id={product.id} title= {product.title} image={product.image} image_description={product.image_description} price={product.price} description={product.description}/>)}
                </div>
            </div>
        </div>
    )
}

查看 React 文档：Rendering multiple components

如何在 React 中动态命名变量

How to dynamically name variables in React

javascript

reactjs

variables

dynamic-variables