React Собственные параметры прохождения через функцию карты

Question

Я просто изучаю React Native, и я хочу создать серию кнопок с использованием динамических данных. Мой текущий код:

var locations = this.state.campus.map(function(item, key){ 
      return(
       <TouchableHighlight key={key} 
       style={[styles.button, (this.state.location==={item} && styles.buttonPressed)]} 
       underlayColor='#dddddd' 
       onPress={()=>this.buttonPress({item})} > 
       <Text style={ 
        styles.plainText}>{item}</Text> 
      </TouchableHighlight> 
      ) 

Моя проблема с линиями

style={[styles.button, (this.state.location==={item} && styles.buttonPressed)]} 

и

onPress={()=>this.buttonPress({item})} 

я пытаюсь генерировать эти строки, используя данные динамически выключения функции карты. Эти строки кода работают отлично, если я использую статические данные (т. Е. Генерирую каждую кнопку отдельно), но не используя динамические данные. Код действительно создает дисплей, поэтому проблема связана не с рендерингом, а с функциональностью.

При нажатии кнопки я получаю сообщение об ошибке undefined не в объекте, в то время как стиль просто вызывает отображение всего дисплея.

Очевидно, что динамические данные ({item}) работают внутри элемента Text, но не передаются другим элементам в качестве данных. Я попытался использовать {{item}}, но это вызывает синтаксическую ошибку.

Есть ли способ обрабатывать динамические данные, подобные этому в React Native?

Answer 1

В обоих случаях вы необязательно обертываете item в {}. Для обеих этих строк выражения внутри внешнего {} являются чистым javascript (массивом и функцией) и должны следовать синтаксису javascript.

Так линии следует читать следующим образом:

style={[styles.button, (this.state.location===item && styles.buttonPressed)]} 

и

onPress={()=>this.buttonPress(item)} 

Answer 2

Вы должны хранить это в другой переменной: пусть _this = это;

Затем используйте _this вместо этого

Answer 3

этот вопрос произошел потому, что вы используете функцию (пункт, ключ) {и вы должны использовать функцию стрелы

let locations = this.state.campus.map((item, key) => { return <TouchableHighlight key={key}.. 

вы должны сделать это для донжона используя «этот» контекст

Answer 4

этот метод работы: 1) Создать функцию для создания элементов с динамическими DATAS

createElement = (item) => { 
    return(
     <TouchableHighlight onPress={()=>this.buttonPress({item})}> 
      <Text style={ styles.plainText }> {item} </Text> 
     </TouchableHighlight> 
    ) 
}; 

2) Используйте эту функцию в визуализации функции, как в последующем примере:

render (
    elementsList = []; 
    for (var i = 0; i < 10; i++){ 
     elementsList.push(this.createElement(i)); 
    }; 

    return (
     <View> 
      {elementsList} 
     </View> 
    ) 
); 

Это работает, если вы знаете, как использовать это.