Question

我正在尝试从另一个文件导入样式变量，但它告诉我它未定义

我的目录：

  Components
    Login
        LoginForm.js
    appstyle.js

appstyle.js

export default AppStyles = {
    colour: {
        custom: 'rgb(86,200,95)'
    }
}

Login.js

import React, { Component } from 'react';
import AppStyles from '../appstyle';
class LoginForm extends Component {
    render() {
        const header = {
            color: AppStyles.color.custom 
        }
    return (<div ><p style={header}> test </p></div>)


}

错误：

./src/components/appstyle.js
  Line 1:  'AppStyles' is not defined  no-undef

Search for the keywords to learn more about each error.

有什么问题？老实说，我无法看到我做了什么让它无法识别它。

Answer 1

export default AppStyles = {
    colour: {
        custom: 'rgb(86,200,95)'
    }
}

AppStlyes未定义。你没有变量声明。

相反它应该是这样的。

 const AppStyles = {
    colour: {
        custom: 'rgb(86,200,95)'
    }
};

export default AppStyles;

Answer 2

如果您想要为declare a variable命名所需的内容，那么您的导出声明是错误的：

或者您也可以不对其进行命名，因为它是default导出，并且只在Login文件中命名导入。

export default { 
    [...]
}

Answer 3

拼写错误：

AppStyles设置属性colour：

export default {
    colour: {
        custom: 'rgb(86,200,95)'
    }
}

您正在寻找名为color的商家：

AppStyles.color.custom

修改

您还需要直接导出对象。您尝试导出的方式导致未定义的问题。

Answer 4

重写appstyle.js：

const AppStyles = ...;
export default AppStyles;

反应进口不按预期运作

4 个答案: