首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >从index.js抛出错误销毁导出

从index.js抛出错误销毁导出
EN

Stack Overflow用户
提问于 2020-07-09 04:41:12
回答 1查看 101关注 0票数 0

我将我的样式组件分割成不同的文件,并将它们导出到一个index.js中,然后再将它导出到我的应用程序中。

问题

得到一个错误:

代码语言:javascript
运行
复制
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `LoginScreen`.

This error is located at:
    in RCTScrollContentView (at ScrollView.js:1063)
    in RCTScrollView (at ScrollView.js:1196)
    in ScrollView (at KeyboardAwareHOC.js:517)
    in KeyboardAwareScrollView (at LoginScreen.js:165)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in ForwardRef(SafeAreaView) (at LoginScreen.js:164)
    in LoginScreen (at SceneView.tsx:98)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:89)
    in EnsureSingleNavigator (at SceneView.tsx:88)
    in SceneView (at useDescriptors.tsx:125)
    in RCTView (at CardContainer.tsx:199)
    in RCTView (at CardContainer.tsx:198)
    in RCTView (at CardSheet.tsx:33)
    in ForwardRef(CardSheet) (at Card.tsx:526)
    in RCTView (at createAnimatedComponent.js:144)
    in AnimatedComponent (at createAnimatedComponent.js:194)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:508)
    in PanGestureHandler (at GestureHandler.native.tsx:13)
    in PanGestureHandler (at Card.tsx:502)
    in RCTView (at createAnimatedComponent.js:144)
    in AnimatedComponent (at createAnimatedComponent.js:194)
    in ForwardRef(AnimatedComponentWrapper) (at Card.tsx:498)
    in RCTView (at Card.tsx:492)
    in Card (at CardContainer.tsx:164)
    in CardContainer (at CardStack.tsx:497)
    in RCTView (at Screens.tsx:70)
    in MaybeScreen (at CardStack.tsx:490)
    in RCTView (at Screens.tsx:48)
    in MaybeScreenContainer (at CardStack.tsx:388)
    in CardStack (at StackView.tsx:433)
    in KeyboardManager (at StackView.tsx:431)
    in RNCSafeAreaView (at src/index.tsx:28)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:42)
    in SafeAreaProviderCompat (at StackView.tsx:428)
    in RCTView (at StackView.tsx:427)
    in StackView (at createStackNavigator.tsx:82)
    in StackNavigator (at App.js:40)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:288)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:64)
    in ThemeProvider (at NavigationContainer.tsx:63)
    in ForwardRef(NavigationContainer) (at App.js:39)
    in App (at hashtagui/index.js:23)
    in Provider (at hashtagui/index.js:22)
    in HashtagMain (at renderApplication.js:45)
    in RCTView (at AppContainer.js:109)
    in RCTView (at AppContainer.js:135)
    in AppContainer (at renderApplication.js:39)

src/styles/login.js

代码语言:javascript
运行
复制
import styled from 'styled-components/native';

const LoginWrapper = styled.View`
  justify-content: center;
  align-items: center;
`;

const LoginTop = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
`;
const LoginBottom = styled.View`
  flex: 1;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
`;

export { LoginWrapper, LoginTop, LoginBottom };

src/styles/index.js

代码语言:javascript
运行
复制
export { default as LoginStyles } from './login';

src/screens/LoginScreen.js

代码语言:javascript
运行
复制
import { LoginWrapper, LoginTop, LoginBottom } from '../styles';

return (
    <SafeAreaView keyboardShouldPersistTaps="handled">
      <KeyboardAwareScrollView
        extraHeight={200}
        contentContainerStyle={styles.loginContainer__keyboardScrollView}>
        <LoginWrapper>
          <LoginTop>
            <Logo width={200} height={250} />
          </LoginTop>
          <LoginBottom>
            <FormikForm navigation={navigation} dispatch={dispatch} />
          </LoginBottom>
        </LoginWrapper>
      </KeyboardAwareScrollView>
    </SafeAreaView>
  );

我的出口有什么问题?

这就是我提到的:

将样式化的组件拆分为多个文件,但将它们作为一个文件导出。

用于JavaScript和TypeScript的导出和导入模块的方便指南

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-09 05:17:09

src/styles/index.js中,内容将是:

代码语言:javascript
运行
复制
export { LoginWrapper, LoginTop, LoginBottom } from './login';

如果您在styles中有另一个文件(例如: signup.js),则需要执行以下操作:

signup.js

代码语言:javascript
运行
复制
...
export { SignUpWrapper, SignUpTop, SignUpBottom };

然后在index.js

代码语言:javascript
运行
复制
export { LoginWrapper, LoginTop, LoginBottom } from './login';
export { SignUpWrapper, SignUpTop, SignUpBottom } from './signup';

然后,在`LoginScreen.js中导入您想要使用的内容。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62807568

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档