Блог

Привет, я очень новичок, и я практиковался с react.

Суть этого поста в том, что я хочу динамически создавать некоторые переменные в react, но не могу.

я делаю веб-страницу магазина с помощью React. Итак, чтобы создать домашнюю страницу, на которой отображаются продукты, я создал компонент продукта, который принимает некоторые свойства, подобные этому

 import React from 'react'


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

lt;/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
 
затем я импортировал этот компонент в домашний компонент, и чтобы сделать код более чистым, я создал несколько переменных, которые принимают один элемент массива
 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, и он сработал, но когда я поместил его в домашний компонент в react, он не работает.

Это то, что показывает веб-страница.
 Failed to compile

srcHome.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: я не говорю по-английски, поэтому, пожалуйста, простите мои грамматические грехи.

Похоже, вы ищете способ динамического создания элементов 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: рендеринг нескольких компонентов

вы можете использовать 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})
 

что-то вроде этого…