【问题标题】:passing data into a modal将数据传递到模态
【发布时间】:2019-11-18 16:04:48
【问题描述】:

我正在尝试将一些数据从容器传递到模态,并且我已经做到了。它得到错误 undefined is not an object evaluation (evalating _this.props.status) 我做了什么吗?我应该在道具中调用什么

这些是我的代码

container.js

buildPanel(index, item) {
        let panel = [];
        let keys = DBkeys['Requests'].MyRequest;
        
            let status = item[keys['status']];
        panel.push(<View style={{ position: 'absolute', right: 0, bottom: 0, padding: normalize(5), alignItems: 'center' }} key={'status'}>
          <TouchableOpacity onPress={this.handleShowModal()}>
            <Icon name={img.itemStatus[status].name} type={img.itemStatus[status].type} color={img.itemStatus[status].color} size={normalize(38)} />
          </TouchableOpacity>
        </View>);

        return panel;
        }

 <View style={[styles.panelContainer, status === 'success' ? {} : { backgroundColor: color.white }]}>
              <FlatList
                showsVerticalScrollIndicator={false}
                progressViewOffset={-10}
                refreshing={this.state.refreshing}
                onRefresh={this.onRefresh.bind(this)}
                onMomentumScrollEnd={(event) => event.nativeEvent.contentOffset.y === 0 ? this.onRefresh() : null}
                data={content}
                renderItem={({ item }) => item}
                keyExtractor={(item, key) => key.toString()}
                 />
            </View>
            <IconModal visible={this.state.modalVisible} close={this.handleDismissModal} status='test' desc='test' />
        

IconModal.js

const IconModal = (props) => {

    return(
        <Modal 
            isVisible={props.visible}
            onBackdropPress={props.close}
        >
            <View style={styles.dialogBox}> 
                <View style={styles.icon}>
                    <Icon></Icon>
                </View>

                <View style={styles.text}>
                    <Text style={styles.status}>{this.props.status}</Text>
                    <Text>{this.props.desc}</Text>
                </View>
                    <TouchableOpacity onPress={props.close}>
                        <View>
                            <Text style={styles.buttonText}>GOT IT</Text>
                        </View>
                    </TouchableOpacity>
            </View>
            
        </Modal>
    )
}

IconModal.propTypes ={
    visible: PropTypes.bool.isRequired,
    close: PropTypes.func,
}

【问题讨论】:

  • 为了避免混淆this,我通常更喜欢解构props,像({ status, close, visible, ...otherProps }) =&gt; { ... }那样传递给函数组件。
  • 好的,谢谢您的建议

标签: react-native react-modal


【解决方案1】:

将字符串传递给组件时使用双引号。像 status="test" desc="test" 而不是 status='test' desc='test' 。而不是this.props.status 使用props.status。与this.props.desc相同

【讨论】:

  • 好的,我有一个问题,如果它来自索引,我如何传递 desc
  • 如果你想传递字符串以外的任何东西,像这样传递desc={value},例如:desc={5}
【解决方案2】:

删除this 关键字。应该只是props.statusprops.desc

【讨论】:

    猜你喜欢
    • 2019-11-17
    • 1970-01-01
    • 2021-11-14
    • 2021-11-11
    • 1970-01-01
    • 2021-09-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多