javascript - 有没有办法导出默认的 2 个常量？
<p><p><em>注意:我是学习 React Native 的初学者。</em> 我有两个 js 文件(Inputs.js 和 Styles.js)，我试图将它们都放在 <code>const</code> 在我的主 js 文件 (App.js) 中，但我只能 <code>export default</code> 其中一个。有没有办法可以同时导出它们，或者我应该以另一种方式重新排列我的代码？</p>
<p><strong>App.js:</strong></p>
<pre><code>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
</code></pre>
<p><strong>Style.js:</strong></p>
<pre><code>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
}
})
</code></pre>
<p><strong>Inputs.js:</strong></p>
<pre><code>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'
}
})
</code></pre>
<p>****以下错误的更新代码:<code>元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)，但得到:对象。</code>:*****</p>
<p><strong>App.js:</strong></p>
<pre><code>import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
module.exports = {
Home1() {
return (
<Style/>
);
},
Home2() {
return (
<Inputs/>
);
}
};
</code></pre>
<p><strong>Style.js</strong></p>
<pre><code>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
}
})
</code></pre>
<p><strong>Inputs.js</strong></p>
<pre><code>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'
}
})
</code></pre></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>在这种情况下，您可以使用 <code>module.exports</code> 通过两种方法导出对象。用法:</p>
<pre><code>export function Home1() {
return (
<Style/>
);
};
export function Home2() {
return (
<Inputs/>
);
};
</code></pre>
<p>这是您名为 App.js 的文件的一部分，因此要将其导入另一个文件，您需要:</p>
<pre><code>import { Home1, Home2 } from "./App.js"
</code></pre>
<p>在这种情况下，您使用的是<strong>命名导出</strong>。为了正确导入它，您明确需要使用 <code>import { Home1, Home2 }</code> ，其中 Home1 和 Home2 是导出函数的对应名称。 </p></p>
<p style="font-size: 20px;">关于javascript - 有没有办法导出默认的 2 个常量？，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/45201326/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/45201326/
</a>
</p>
页:
[1]