ReactJs 如何从 src 文件夹中的同级文件夹导入组件？

Question

/src
|--components
|  |--Layout
|  |  |--AppLayout.js
|  |  |--Header.js
|  |  |--Content.js
|  |  |--Footer.js
|  |--Root.js
|--constants
|  |-- AppConfig.js
|--index.js

Currently, I have my react js project structured as described above. My question is how can I import config from AppConfig.js in the file Root.js(sibling folder inside src folder), and also import it to the AppLayout.js? I have tried import APPCONFIG from '../../constants/appConfig'; , import APPCONFIG from '../constants/appConfig'; , import APPCONFIG from './constants/appConfig'; , import APPCONFIG from './constants/appConfig'; and import APPCONFIG from 'constants/appConfig'; but nothing works.

Answer 1

It is based on how you export class/function AppConfig

1. Say your class/function name is AppConfig and you export it like

const AppConfig = () => {} export default AppConfig;

You can import AppConfig below way.

1. For Root.js

import AppConfig from '../constants/AppConfig';

2. For AppLayout.js

import AppConfig from '../../constants/AppConfig';

2. Say your class/function name is AppConfig and you export it like

export const AppConfig = () => {};

You can import AppConfig below way.

1. For Root.js

import {AppConfig} from '../constants/AppConfig';

2. For AppLayout.js

import {AppConfig} from '../../constants/AppConfig';

If still not work then please provide way you export your AppConfig class/function

more details related export and import class/function es6 javascript please check below links

https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Answer 2

from Applayout.js you want to import Appconfig.js

so in Applayout.js import APPCONFIG from '../../constants/AppConfig

Some Tips for you

• read more about root import
• use editors that gives you some functionalities to help you in this small cases