通过功能组件导入和导出多个组件

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;

然后在您的App.js中
import Login from '../components/Login.js';  //or wherever this component lives 

Answer 2

如果您真的想实现自己想要的。您可以改为：

export default Login;

export default Header;

在每个文件上并将其导入到index.js中
import Login from './login';
import Header from './header';

...

export {
 Login,
 Header
}

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

Answer 3

假设我们的文件夹结构如下所示。

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

1。导出组件
// ./elements/Login.js
export { Login }; 
// ./elements/Header.js
export { Header };

2。导入和导出index.js中的所有组件
// ./elements/index.js
export { Loading } from './Login';
export { Header } from './Header';

导入我们需要的任何文件
// ./components/App.js
import { Login, Header } from '../elements';