Я сталкиваюсь со странной проблемой, когда я export отправляет const в другой файл js. Вот моя проблема:

Представьте, что у меня есть два файла с именами index.js и router.js.

// in router.js
export const stackNav = StackNavigator({
Home: {
    screen: Me,
    navigationOptions: {
        title: 'Welcome'
    }
}
});


// in index.js
import { stackNav } from './router';

class MainApp extends Component {
    render() {
        return (
            <stackNav />
       );
    }
}

export default MainApp;

Когда я использую приведенный выше код для запуска, мне не удается запустить мое приложение, и оно показывает сообщение об ошибке с красным экраном: Expected a component class, got [object Object].

Однако, если я изменю все stackNav на StackNav, я смогу успешно запустить свое приложение. Итак, я не знаю, почему регистр имени / идентификатора имеет значение?

0
bufferoverflow76 29 Май 2017 в 06:35

2 ответа

Лучший ответ

Поскольку имя компонента React / ReactNative должно начинаться с заглавных букв

1
Kawatare267 29 Май 2017 в 08:33

Ссылаясь на официальный документ,

Определяемые пользователем компоненты должны быть заглавными

Когда тип элемента начинается со строчной буквы, он ссылается на встроенный компонент, такой как или, и приводит к строке 'div' или 'span', передаваемой в React.createElement.

Типы, которые начинаются с заглавной буквы, такие как compile to React.createElement (Foo) и соответствуют компоненту, определенному или импортированному в вашем файле JavaScript.

Мы рекомендуем называть компоненты заглавными буквами. Если у вас есть компонент, который начинается со строчной буквы, присвойте его заглавной переменной перед использованием в JSX.

Ниже приведен фрагмент кода из документа.

import React from 'react';

// Wrong! This is a component and should have been capitalized:
function hello(props) {
// Correct! This use of <div> is legitimate because div is a valid HTML tag:
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
  return <hello toWhat="World" />;
}
0
bufferoverflow76 10 Июл 2017 в 03:33