Question

我有一个包含图标，描述和状态的模态，并且我想将图标和描述从索引传递到模态，我已经传递了状态。反正有这样做吗？抱歉，我仍然是新来的本地人，请先感谢

这是我的index.js

export const img =
{
   itemStatus: {
        "Open": { name: 'open-book', type: 'entypo', color: '#ffb732', desc:'New Attribut, New Attention'},
        "Approved": { name: 'checklist', type: 'octicon', color: '#3CB371', desc:'Approved by SPV/MNG' },
        "Escalated": { name: 'mail-forward', type: 'font-awesome', color: '#ffb732', desc:'Escalated to SPV/MNG' },
        "Deliver Partial": { name: 'arrange-send-to-back', type: 'material-community', color: '#8B4513', desc:'Some items in a DO have not arrived/was faulty' },
    
    };

这是我的容器

class MyRequest extends React.Component {
  constructor() {
    super();
    this.state = {
      currentStatus: null,
      refreshing: false,
      fetchStatus: null
    };
    
      handleShowModal = (status) =>{
      this.setState({
        currentStatus: status,
      });
  }

  handleDismissModal = () =>{
    this.setState({currentStatus: null});
  }
  
  <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} icon={} status={this.state.currentStatus} desc={} />
  
    }

这是我的模态

const IconModal = (props) => {

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

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

Answer 1

尚不清楚您如何计划针对img.itemStatus索引进行映射，但是您可以照这样引用您想要的对象。

import img from '....path_to_index.js'

...

// const currentItemStatus = img.itemStatus.Open
// OR
const itemStatus = 'Open' // Or 'Approved', 'Escalated', 'Deliver Partial' 
const currentItemStatus = img.itemStatus[itemStatus]

...

<IconModal
  visible={this.state.modalVisible}
  close={this.handleDismissModal}
  icon={currentItemStatus.name} // Passing name
  status={this.state.currentStatus}
  desc={currentItemStatus.desc} // Passing desc
/>

...

希望这很有帮助

对本机通行证指数做出反应

1 个答案: