it-swarm.com.ru

React Собственная ошибка: недопустимый тип элемента: ожидал строку или класс/функцию, но получил: object

Я получаю эту ошибку, и у меня много проблем с ее исправлением.

То, что я пытаюсь сделать здесь, это иметь 3 разных экрана и панель вкладок, которая перемещается к каждому экрану.

Вот мой индекс:

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

import Nav from './app/components/Nav';
import Screen from './app/Screen';

import Tabs from 'react-native-tabs'

import SwitchView from './SwitchView';

class Proj extends Component {

constructor(props){
    super(props);
}

render(){
    var x = "FeedView";
    return(

          <View style={styles.container}>
            <Tabs selected={x} style={{backgroundColor:'white'}}
                  selectedStyle={{color:'red'}} onSelect={el=> {x = el.props.name}}>
                <Text name="FeedView">First</Text>
                <Text name="WikiView" selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}>Second</Text>
                <Text name="BoardView">Third</Text>
            </Tabs>

            <SwitchView id={x}/>

          </View>
    );
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
})

AppRegistry.registerComponent('Proj', () => Proj);

вот мой SwitchView:

import Feed from './app/pages/Feed/Feed';
import Board from './app/pages/Board';
import Wiki from './app/pages/Wiki';

class SwitchView extends Component {
render(){
    var { id } = this.props;

    switch (id) {
        case "FeedView":
            return <Feed/>
        case "WikiView":
            return <Wiki/>
        case "BoardView":
            return <Board/>
    }
}
}
23
Parkicism

Вероятно, это вызвано некоторыми проблемами экспорта/импорта JS-модуля в вашей программе, как правило, по одной из двух причин, перечисленных ниже:

  • Вы забыли экспортировать, или вы экспортируете что-то неправильно
  • Вы импортируете что-то, что не существует, или вы импортируете что-то неправильно

Я столкнулся с подобной ошибкой, но в моем случае она вызвана не export, а вызвана import, и я неправильно использовал оператор import для импорта чего-то, чего нет в модуле.

В моем случае import был неправильно написан как:

import { MyComponent } from './MyComponents/MyComponent' 

в то время как на самом деле это должно быть:

import MyComponent from './MyComponents/MyComponent'

И это сводило меня с ума и занимало у меня целый день, чтобы понять это, и я надеюсь, что это сэкономит несколько часов для некоторых людей.

38
nybon

Измените определение SwitchView на 

export default class SwitchView extends Component...

24
Raj R

Измените ваш SwitchView на это:

import Feed from './app/pages/Feed/Feed';
import Board from './app/pages/Board';
import Wiki from './app/pages/Wiki';
export default class SwitchView extends Component {
render(){
    var { id } = this.props;

    switch (id) {
        case "FeedView":
            return <Feed/>
        case "WikiView":
            return <Wiki/>
        case "BoardView":
            return <Board/>
    }
}
}
7
tv3free

В моей вазе у меня был 0.46.4 с собственным кодом реакции, и у меня было что-то вроде import MainContainer from './app', где в каталоге app был общий файл index.js для Android и iOS, но React Native не обнаруживал index.js внутри app. Как только я переключился на import MainContainer from './app/index.js', это сработало.

3
urubuz

Я сталкивался с этой проблемой только для установленных пакетов . Ранее я писал как 

import WebView from 'react-native-webview-messaging/WebView';

Я поменял на 

import { WebView } from 'react-native-webview-messaging/WebView';
2
Sujit

Чем это отличается от module.exports = SwitchView?

Для меня module.exports работает для всех моих js-файлов, кроме одного. 

0
chibeepatag