如何在React中動態命名變數

你好，我很新，我正在練習 React。

這篇文章的 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 陣列中添加新物件時都手動撰寫。

我搜索了一種方法來做到這一點，我找到了 2 種方法。一個帶有 eval() 方法的方法是邪惡的并且不起作用。另一種方法是做一個像這樣的 for 回圈

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

}

我在 javascript 中隔離的其他頁面中測驗了此方法，并且它有效，但是當我將它放入 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：我的母語不是英語，所以請原諒我的語法錯誤。

uj5u.com熱心網友回復：

您似乎正在尋找一種動態制作反應元素的方法。這可以使用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 檔案：渲染多個組件

uj5u.com熱心網友回復：

您可以使用 map 并回傳 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({rednderedProduct})

類似的東西...

標籤：javascript 反应 变量 动态变量

上一篇：我的程式不會停止執行if陳述句但條件不滿足

下一篇：forEach()在javascript中使用變數時的邏輯？