Come concatenare i componenti JSX in React Native

Question

Ad esempio, voglio mostrare un elenco di nomi. Quindi volevo fare qualcosa del genere:

var returnValue; 
for (eachName of _names) { 
    returnValue += (
    <TouchableHighlight 
    onPress={() => this._onPressButton}> 
     <Text> 
     {eachName} 
     </Text> 
    </TouchableHighlight>); 
} 
return returnValue; 

Tuttavia, ciò non è valido. Il che mi porta alla mia domanda: come concatenare una quantità dinamica di componenti JSX in React Native.

Answer 1

Figure Lo capisco appena chiedo StackOverflow. Il codice deve essere messo in un array:

var returnValue = []; 
for (var i = 0; i < _names.length; i++) { 

    returnValue.push(
    <TouchableHighlight onPress={() => this._onPressButton}> 
     <Text> 
     {_names[i]} 
     </Text> 
    </TouchableHighlight>); 
} 
return returnValue; 

Ci sono anche maggiori informazioni qui: http://facebook.github.io/react/docs/multiple-components.html#dynamic-children

Answer 2

Forse un modo più elegante:

return <View> 
{_names.map((eachName) => { 
    return (
    <TouchableHighlight onPress={() => this._onPressButton}> 
     <Text> 
     {eachName} 
     </Text> 
    </TouchableHighlight> 
); 
})} 
</View> 

Answer 3

let returnValue = _names.map(eachName => 
<TouchableHighlight 
    onPress={() => this._onPressButton}> 
     <Text> 
     {eachName} 
     </Text> 
    </TouchableHighlight>); 
return returnValue;