一个模块在ReactNative中不能有多个默认导出

时间:2019-07-23 11:57:27

标签: react-native

我是ReactNative的新手。我正在学习教程。我已经从教程中复制了代码,并得到错误“一个模块不能有多个默认导出”。代码是

// Parent 
export default class ScreenOne extends React.Component {
    render () {
        return (
            <View>
                <Heading message={'Custom Heading for Screen One'}/>
            </View>
           )
         }
}

// Child component
export default class Heading extends React.Component {
    render () {
        return (
            <View>
                <Text>{this.props.message}</Text>
            </View>
               )
             }
}
Heading.propTypes = {
    message: PropTypes.string
}
Heading.defaultProps = {
    message: 'Heading One'
}

我知道我缺少一些非常简单的东西,但是任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:1)

将子组件放入其他文件,并将其导入父组件文件。

heading.js文件中的子组件

export default class Heading extends React.Component {
    render () {
        return (
            <View>
                <Text>{this.props.message}</Text>
            </View>
               )
             }
}

父项

import Heading from "./heading.js";

export default class ScreenOne extends React.Component {
    render () {
        return (
            <View>
                <Heading message={'Custom Heading for Screen One'}/>
            </View>
           )
         }
}

黄金法则:文件中不得包含多个组件。