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})}

我正在尝试使用地图函数动态生成这些行。如果我使用静态数据（即单独生成每个按钮），但这些代码行完美无缺，但使用动态数据失败。代码确实产生了显示，因此问题不在于渲染，问题在于功能。

按下按钮，我得到的错误信息未在对象中定义，而样式只会导致整个显示不呈现。

很明显，动态数据（{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

你应该将它存储在另一个变量中：let _this = this;

然后使用_this代替此

Answer 3

问题出现了，因为你正在使用函数（item，key）{并且你必须使用箭头函数

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

你必须继续使用'this'上下文

Answer 4

此方法有效： 1）创建用于创建具有动态数据的元素的函数

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>
    )
);

如果您了解如何使用它，它会起作用。

通过map函数React Native传递参数

4 个答案:

通过map函数Re​​act Native传递参数

4 个答案:

通过map函数React Native传递参数