импорт и экспорт нескольких компонентов через функциональные компоненты

Question

Я создал файл с именем index.js Я собираюсь использовать этот файл в качестве основного файла импорта и экспорта. У меня есть два компонента, включая логин и заголовок в моем проекте, и я экспортировал их как следующий метод в конце каждого файла:

export {Login};

export {Header};

Затем я экспортировал их оба в index.js следующим способом:

export * from './login';

export * from './header';

И в конце я импортировал оба из них в App.js этим методом:

import {Login, Header} from './components/index';

Не работает, и я получаю ошибку: Инвариантное нарушение: Тип элемента недействителен.
Кто-нибудь знает, в какой части я допустил ошибку?

Answer 1

Если вы используете компоненты стиля класса, вы можете сделать

class Login extends Component {
    render() {
        return(
            <Text> Text and other tags here </Text>
        )
    }
}
export default Login;

Затем в своем приложении. js

import Login from '../components/Login.js';  //or wherever this component lives 

Answer 2

Предположим, что наша структура папок выглядит следующим образом.

|- elements
   |- Login.js
   |- Header.js
   |- index.js
|- components
   |- App.js

1. экспорт компонентов

// ./elements/Login.js
export { Login }; 
// ./elements/Header.js
export { Header };

2. импорт и экспорт всех компонентов в индексе. js

// ./elements/index.js
export { Loading } from './Login';
export { Header } from './Header';

импорт в любой нужный нам файл

// ./components/App.js
import { Login, Header } from '../elements';

Answer 3

Если вы действительно хотите добиться того, чего хотели. Вместо этого вы можете:

export default Login;

export default Header;

для каждого файла и импортировать его в свой индекс. js

import Login from './login';
import Header from './header';

...

export {
 Login,
 Header
}

import {Login, Header} from './components'; // you could eliminate the index