如何为React Native中的组件创建单独的类并将其用作公共类

Question

嗨，我正在学习React Native。我正在使用React Native的模态组件。我需要在应用程序中多次使用相同的时间。这里的代码现在我试图调用该功能{this.createmodal（dataformaritalstatus）}而不是

/* <Modal visible={this.state.isModalVisible}
                        onRequestClose={() => {
                            this.setState({ isModalVisible: false })
                        }}
                        animationType="fade"
                        transparent={true}
                    >
                        <View style={styles.modalContainer}>

                            <ScrollView
                                showsVerticalScrollIndicator={true}
                            >
                                {dataForMaritalStatus === null ? <Text style={styles.nodata}>No data Found </Text> : dataForMaritalStatus.map((status, id) => (
                                    <View key={id}>
                                        <TouchableOpacity
                                            style={styles.opacity}
                                            onPress={() => {
                                                this._toggleModal()
                                            }}>
                                            <Text style={styles.taskList}>{status.value}</Text>
                                        </TouchableOpacity>
                                    </View>
                                ))}
                            </ScrollView>
                        </View>
                    </Modal>
*/

那么，如何为此组件制作一个通用类并传递不同的数据阵列并将其用于渲染方法？出于不同的目的，数据将有所不同，我需要为不同的目的维护不同的状态。

编辑：我已经写了一种方法，但是它调用了该功能，但它没有渲染模式，我需要渲染吗？

    createModal = (data) => {
<Modal visible={this.state.isModalVisible}
                        onRequestClose={() => {
                            this.setState({ isModalVisible: false })
                        }}
                        animationType="fade"
                        transparent={true}
                    >
                        <View style={styles.modalContainer}>

                            <ScrollView
                                showsVerticalScrollIndicator={true}
                            >
                                {data === null ? <Text style={styles.nodata}>No data Found </Text> : data.map((status, id) => (
                                    <View key={id}>
                                        <TouchableOpacity
                                            style={styles.opacity}
                                            onPress={() => {
                                                this._toggleModal()
                                            }}>
                                            <Text style={styles.taskList}>{status.value}</Text>
                                        </TouchableOpacity>
                                    </View>
                                ))}
                            </ScrollView>
                        </View>
                    </Modal>
  }

Answer 1

解决方案1

创建一个单独的文件customModalComponent.js，然后通过道具传递数组数据。更改模态组件，将this.props.dataForMaritalStatus用于dataForMaritalStatus ..

<ScrollView showsVerticalScrollIndicator={true}>
  {this.props.dataForMaritalStatus === null ? <Text style={styles.nodata}>No data Found </Text> 
    : this.props.dataForMaritalStatus.map((status, id) => (
      ...
  )}
</ScrollView>

然后在任何其他文件上，import CustomModal from './customModalComponent'并以这种方式使用它，

<CustomModal dataForMaritalStatus={yourArrayOfData}/>

解决方案2

如果您只是在同一文件中使用它，请创建一个函数

class myClass extends Component {
  constructor(props) {
    super(props);
    this.createModal = this.createModal.bind(this);
  }
  render() {
    ...
  }
  createModal(dataForMaritalStatus) {
    return (
      //Insert your Modal code here
      ...
    )
  }
}

并以这种方式在您的渲染中使用它，

render() {
  <View>
    ...
    { 
      this.createModal(yourArrayOfData)
    }
    ...
  </View>
}

Answer 2

在一个文件夹中创建新组件。

app-> commonmodal.js

commonmodal.js

import React, { Component } from 'react';
import { View, Text, Modal, TouchableOpacity } from 'react-native';
export default class CommonModal extends Component{
constructor(props) {
        super(props);
    }
}
render(){
return(
<Modal visible={this.state.isModalVisible}
                    onRequestClose={() => {
                        this.setState({ isModalVisible: false })
                    }}
                    animationType="fade"
                    transparent={true}
                >
                    <View style={styles.modalContainer}>

                        <ScrollView
                            showsVerticalScrollIndicator={true}
                        >
                            {this.props.dataForMaritalStatus === null ? <Text style={styles.nodata}>No data Found </Text> : this.props.dataForMaritalStatus.map((status, id) => (
                                <View key={id}>
                                    <TouchableOpacity
                                        style={styles.opacity}
                                        onPress={() => {
                                            this._toggleModal()
                                        }}>
                                        <Text style={styles.taskList}>{status.value}</Text>
                                    </TouchableOpacity>
                                </View>
                            ))}
                        </ScrollView>
                    </View>
                </Modal>
)
}

注意：我已经使用了this.props.dataformaritaltatus

，然后在需要零件的任何地方使用它

app-> second.js

second.js

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import CommonModal from './CommonModal';
export default class Second extends Component{
constructor(props){
super(props);
this.state={
dataForMaritalStatus:['val1','val2']
}
}
render(){
return(<View style={{flex:1}}>
<CommonModal dataForMaritalStatus={this.state.dataForMaritalStatus}/>
</View>)}
}

Answer 3

为模型创建一个单独的组件

import React, { Component } from "react";
import { Text, View, Modal, ScrollView, TouchableOpacity, Text } from "react-native";
export default class CustomModel extends Component {
  render() {
    const { dataForMaritalStatus } = this.props;
    return (
      <Modal
        visible={this.state.isModalVisible}
        onRequestClose={() => {
          this.setState({ isModalVisible: false });
        }}
        animationType="fade"
        transparent={true}
      >
        <View style={styles.modalContainer}>
          <ScrollView showsVerticalScrollIndicator={true}>
            {dataForMaritalStatus === null ? (
              <Text style={styles.nodata}>No data Found </Text>
            ) : (
              dataForMaritalStatus.map((status, id) => (
                <View key={id}>
                  <TouchableOpacity
                    style={styles.opacity}
                    onPress={() => {
                      this._toggleModal();
                    }}
                  >
                    <Text style={styles.taskList}>{status.value}</Text>
                  </TouchableOpacity>
                </View>
              ))
            )}
          </ScrollView>
        </View>
      </Modal>
    );
  }
}

不要忘记导出该组件。

现在在要使用该组件中导入该组件

import Model from "./CustomModel";

并以这种方式使用

<CustomModel dataForMaritalStatus=[] />

您可以使用上述道具传递数据。

您可以在此处了解有关道具的更多信息：https：//facebook.github.io/reeact-native/docs/props/props