Рендеринг нескольких элементов JSX из массива объектов - PullRequest
Новая
       6

Рендеринг нескольких элементов JSX из массива объектов

0 голосов
/ 13 июня 2018

У меня возникли проблемы при создании нескольких элементов JSX, например (несколько текстовых полей или кнопок из данных, которые я отображаю из массивов объектов). Он генерирует все содержимое массива в одном теге / элементе JSX.Как я могу получить его для создания нескольких тегов?Заранее спасибо. 

const labourers = [
  {
    id: 1,
    name: 'Velry Mokwena',
    skills: ['Domestic Cleaning'],
    location: ['Pretoria'],
    rating: 100,
  },
  {
    id: 2,
    name: 'Isaac Cindi',
    skills: ['Gardening', 'Painting', 'Plastering', 'General Labour'],
    location: ['Centurion'],
    rating: 100,
  },
  {
    id: 3,
    name: 'Joseph Mahlangu',
    skills: ['Bricklaying', 'Plastering'],
    location: ['Menlo Park', 'Pretoria'],
    rating: 100,
  },
];

var labourer = labourers.map(labourer => (
  <View key={labourer.id} style={{display: 'flex', marginBottom: 20, backgroundColor: 'gray', padding: 20}}>
    <Text style={{textAlign: 'center'}}>{labourer.name}</Text>
    <Text style={{textAlign: 'center'}}>{labourer.skills}</Text>
    <TouchableOpacity><Text style={{textAlign: 'center'}}>{labourer.location}</Text></TouchableOpacity>
  </View>
));

Ответы [ 2 ]

0 голосов
/ 13 июня 2018

Вместо этого 

 <Text style={{textAlign: 'center'}}>{labourer.skills}</Text>

, который присоединит массив к одной текстовой строке, просто сопоставьте его с другим элементом jsx: 

{labourer.skills.map(skill => 
 <Text style={{textAlign: 'center'}}>{skill}</Text>
)}
0 голосов
/ 13 июня 2018

Вам нужно внести некоторые изменения в логику итерации, как показано ниже 

render(){
.
.
.
          var labourer = labourers.map(function(labourer){
                  return(  <View key={labourer.id} style={{display: 'flex',marginBottom: 20, backgroundColor: 'gray', padding: 20}}>
                             <Text style={{textAlign: 'center'}}>{labourer.name}</Text>
                             <Text style={{textAlign: 'center'}}>{labourer.skills}</Text>
                             <TouchableOpacity><Text style={{textAlign: 'center'}}>{labourer.location}</Text></TouchableOpacity>
                            </View> )
         });

         return (
                //render here
                <div>
                  labourer
                </div>

         )
}
...