Блог

Сейчас я изучаю реакцию. У меня есть вопрос о методе отображения. Есть ли какие-либо различия между productName1 и productName2? (кроме части li)

 const productName1 = arr.map(a =><li>{a.name}</li> );
const productName2 = arr.map(a =>a.name );
 

Спасибо.

     const arr = Data;
    
    // console.log(arr);
    
    const productName1 = arr.map(a =><li>{a.name}</li> );
    const productName2 = arr.map(a =>a.name );

    console.log(productImage);

    return (
        <div className="contents">   
        <h1>Please Select Products</h1>      
            <h3>{productName1}</h3>
            <h3>{productName2}</h3>
        </div>
    )
}

export default ProductData
 

Да, они разные, если предположить, что ваш массив выглядит примерно так:

 const arr = [
  {name: "John"},
  {name: "Jane"},
  {name: "Jim"}
]
 

Создание html-кода в productName1 выглядит примерно так:

 <h3>
 <li>John</li>
 <li>Jane</li>
 <li>Jim</li>
</h3>
 

Который в react эквивалентен массиву JSX.Element, который набран как этот JSX.Element[]

В то время как результат productName2 будет таким:

 <h3>JohnJaneJim</h3>
 

Который представляет собой всего лишь строковый массив, который будет набран следующим образом: строка[]

Таким образом, в основном в productName1 вы создаете элементы тегов li, которые содержат имя, которое создает недопустимый html, поскольку вам нужно завернуть элементы li внутрь и тег ol или тег ul. productName2 генерирует только массив строк, которые будут сопоставлены внутри h3