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

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

Main.hs:31:35: error:
    • No instance for (LoadFromFile RequirementsHistory)
        arising from a use of ‘loadFromFile’
    • In the second argument of ‘($)’, namely
        ‘loadFromFile requirementsHistoryFile’
      In a stmt of a 'do' block:
        requirementsHistory <- liftIO
                                 $ loadFromFile requirementsHistoryFile
      In the expression:
        do requirementsHistory <- liftIO
                                    $ loadFromFile requirementsHistoryFile
           displayRequirementsHistory requirementsHistory
   |
31 |   requirementsHistory <- liftIO $ loadFromFile requirementsHistoryFile
   |

export default Login;

在每个文件上并将其导入到index.js

export default Header;

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

...

export {
 Login,
 Header
}

Answer 2

如果您使用类样式组件，则可以

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 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';

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

3 个答案: