有没有办法导出默认的 2 个常量？答案

【问题标题】：Is there a way to export default 2 constants?有没有办法导出默认的 2 个常量？
【发布时间】：2017-07-19 21:27:24
【问题描述】：

注意：我是学习 React Native 的初学者。 我有两个 js 文件（Inputs.js 和 Styles.js），我正试图将它们都放在我的主文件中的 const js 文件（App.js），但我只能export default 其中之一。有没有办法可以同时导出它们，或者我应该以其他方式重新排列我的代码？

App.js：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const Home1 = () => {
   return (
      <Style/>
   )
}
const Home2 = () =>{
   return (
      <Inputs />
   )
}

export default Home1; //I am unable to export both Home1 and Home2 here

Style.js：

import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native'

const Style = () => {
    return ( <View style = {styles.container}>
         <Text style = {styles.text}>
            <Text style = {styles.capitalLetter}>
               Title Here
            </Text>
            <Text>
                <Text style = {styles.textInput}> {"\n"} {"\n"}{"\n"}Location: </Text>
            </Text>
            <Text>
                <Text style = {styles.textInput}> {"\n"} {"\n"}Time:</Text>
            </Text>
            <Text>
                <Text style = {styles.textInput}> {"\n"} {"\n"}Time: </Text>
            </Text>
         </Text>
      </View>
   )
}

export default Style

const styles = StyleSheet.create ({
   container: {
      //alignItems: 'center',
      marginTop: 50,
   },

   text: {
      color: '#41cdf4',
   },

   capitalLetter: {
      color: 'red',
      fontSize: 20
   },

   textInput: {
      padding: 22,
      //fontWeight: 'bold',
      color: 'black'
   },


   textShadow: {
      textShadowColor: 'red',
      textShadowOffset: { width: 2, height: 2 },
      textShadowRadius : 5
   }
})

Inputs.js：

import React, { Component } from 'react'
import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'

class Inputs extends Component {

   state = {
      email: '',
      password: ''
   }

   handleEmail = (text) => {
      this.setState({ email: text })
   }

   handlePassword = (text) => {
      this.setState({ password: text })
   }

   login = (email, pass) => {
      alert('email: ' + email + ' password: ' + pass)
   }

   render(){
      return (
         <View style = {styles.container}>
            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Email"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handleEmail}/>

            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Password"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handlePassword}/>

            <TouchableOpacity
               style = {styles.submitButton}
               onPress = { () => this.login(this.state.email, this.state.password)}>
               <Text style = {styles.submitButtonText}>
                  Submit
               </Text>
            </TouchableOpacity>
         </View>
      )
   }
}

export default Inputs

const styles = StyleSheet.create({
   container: {
      paddingTop: 200
   },

   input: {
      margin: 15,
      height: 40,
      borderColor: '#7a42f4',
      borderWidth: 1
   },

   submitButton: {
      backgroundColor: '#7a42f4',
      padding: 10,
      margin: 15,
      height: 40,
   },

   submitButtonText:{
      color: 'white'
   }
})

****以下错误的更新代码：Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.:*****

App.js：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

module.exports = { 
  Home1() {
    return (
      <Style/>
    );
  }, 
  Home2() {
    return (
      <Inputs/>
    );
  } 
};

Style.js

import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native'
import { Inputs } from "./App.js"
import Home1, {Home2} from './App.js'

const Style = () => {
    return ( <View style = {styles.container}>
         <Text style = {styles.text}>
            <Text style = {styles.capitalLetter}>
               Title Here
            </Text>
            <Text>
                <Text style = {styles.textInput}> {"\n"} {"\n"}{"\n"}Your address or location (eg, Nashville, TN): </Text>
            </Text>
            <Text>
                <Text style = {styles.textInput}> {"\n"} {"\n"}Contact 2:</Text>
            </Text>
            <Text>
                <Text style = {styles.textInput}> {"\n"} {"\n"}Contact 3: </Text>
            </Text>
         </Text>
      </View>
   )
}

export default Style

const styles = StyleSheet.create ({
   container: {
      //alignItems: 'center',
      marginTop: 50,
   },

   text: {
      color: '#41cdf4',
   },

   capitalLetter: {
      color: 'red',
      fontSize: 20
   },

   textInput: {
      padding: 22,
      //fontWeight: 'bold',
      color: 'black'
   },


   textShadow: {
      textShadowColor: 'red',
      textShadowOffset: { width: 2, height: 2 },
      textShadowRadius : 5
   }
})

Inputs.js

import React, { Component } from 'react'
import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'
//import { Style } from "./App.js"
import Home1, {Home2} from './App.js'

class Inputs extends Component {

   state = {
      email: '',
      password: ''
   }

   handleEmail = (text) => {
      this.setState({ Location: text })
   }

   handlePassword = (text) => {
      this.setState({ Time: text })
   }

   login = (email, time1) => {
      alert('Location: ' + email  + ' Time: ' + time1)
   }

   render(){
      return (
         <View style = {styles.container}>
            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Location"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handleEmail}/>

            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Time"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handlePassword}/>

            <TouchableOpacity
               style = {styles.submitButton}
               onPress = { () => this.login(this.state.email, this.state.password)}>
               <Text style = {styles.submitButtonText}>
                  Submit
               </Text>
            </TouchableOpacity>
         </View>
      )
   }
}

export default Inputs

const styles = StyleSheet.create({
   container: {
      paddingTop: 200
   },

   input: {
      margin: 15,
      height: 40,
      borderColor: '#7a42f4',
      borderWidth: 1
   },

   submitButton: {
      backgroundColor: '#7a42f4',
      padding: 10,
      margin: 15,
      height: 40,
   },

   submitButtonText:{
      color: 'white'
   }
})

【问题讨论】：

你为什么不只导出两者，但没有 default ？那么你可以像这样导入：import { Style, Inputs } from './constant';
@AntoineGrandchamp 那么你是说我应该创建一个名为 constant 的 js 文件，然后以某种方式合并 Style 和 Inputs 文件？
对不起，我想我误解了你的问题。看看@Tomasz Bubala 的回答，应该是你需要的
@AntoineGrandchamp 我已经查看了@Tomasz Bubała 的答案，但我收到了一个错误：Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 我尝试询问写答案的人，但该人目前处于离线状态。
如果您只是要导出它们，那么将它们导入 app.js 有什么意义？你在哪里使用这些？

标签： javascript ios react-native expo

【解决方案1】：

在这种情况下，您可以使用module.exports 通过两种方法导出对象。用法：

export function Home1() {
  return (
    <Style/>
  );
};
export function Home2() {
  return (
    <Inputs/>
  );
};

这是您名为 App.js 的文件的一部分，因此要将其导入另一个文件，您需要：

import { Home1, Home2 } from "./App.js"

在这种情况下，您使用的是命名导出。为了正确导入它，您明确需要使用import { Home1, Home2 }，其中 Home1 和 Home2 是导出函数的对应名称。

【讨论】：

我收到了一个错误：Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 也许我收到了这个错误，因为我在这两种方法的每一个中都输入了错误的信息。我用 return 和或放了和以前一样的东西
即使您在答案中包含了编辑，我仍然遇到同样的错误。

【解决方案2】：

您可以导出 const，但只能导出一个默认 const。

import React from 'react';

export const myCon1 = (
  // your code goes here
 );

export const myCon2 = (
  // your code goes here
 );

在另一边你可以导入

import { myCon1 , myCon2} from '/path_to_file';

【讨论】：

【解决方案3】：

您可以只使用一个默认导出，也可以根据需要设置任意数量的导出：

const Home1 = () => { 
  return <Style/>
} 

export const Home2 = () => { 
  return <Inputs />
} 

export default Home1;

然后像这样导入它：

import Home1, {Home2} from './App'

【讨论】：

我只是让 Style.js 文件显示在我的应用程序中。我使用了您在 Style.js 和 Inputs.js 文件中的导入方法，并将您在 App.js 文件中提供的第一组代码放入其中。我做错了吗？
您可以将未显示的组件替换为一个标题或段落之类的内容，以查看它是否首先呈现良好。然后在它出现后，您可以将代码放回去并进一步调查；）
为什么你在 App.js 中这样做，而不仅仅是

【解决方案4】：

创建如下所示代码的组件，该组件有效，并在应用程序中显示 Style.js 和 Inputs.js 文件：

import React, {Component} from 'react';
import { StyleSheet, Text, View, AppRegistry } from 'react-native';
import Style from './Style.js';
import Inputs from './Inputs.js';

export default class App extends Component {
    render() {
        return (
        <View> 
        <Style/> // here, both the Style and Inputs files can be used
        <Inputs/> 
        </View>
        )
    }
}

【讨论】：