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

Posted 2023-03-15

技术标签:

【中文标题】有没有办法导出默认的 2 个常量？【英文标题】：Is there a way to export default 2 constants? 【发布时间】：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 有什么意义？你在哪里使用这些？ 【参考方案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>
        )

【讨论】：

以上是关于有没有办法导出默认的 2 个常量？的主要内容，如果未能解决你的问题，请参考以下文章

PowerDesigner 导出的SQL脚本不带字段注释，解决办法

JS ES6：声明const并将其导出为默认值与将其直接声明为默认导出之间的区别

从自定义 K8s prometheus 导出器中删除默认变量

有没有办法使用 .NET SPARK 更改导出文件名？

有没有办法阻止顺风覆盖降价默认间距？

即使在 React 中正确导入后也不包含默认导出