Javascript 反应：组件结构，是否脱离上下文使用？

我正在启动一个项目。我正在尝试构建留言板页面，页面的左、中、右部分都有组件。该中心是用户发布的地方。左右两边都是新闻、事件。。等等

我的文件结构如下：

--client
----Public
------|index.html
--------src
----------components
-----------Center
------------|CenterForm.js
------------|Post.js
-----------Left
-------------|LatestNews.js
-------------|LeftForm.js
-------------|Trending.js
-------------|WatchList.js
-----------Whole
-------------|WholeComponent.js

最后，我想构建每个部分，然后将它们组合到整个组件中，这样行和列就会平滑。 我得到这个错误：./src/components/Whole/WholeComponent.js 未找到模块：无法解析“/Users/edwarddeleon/Desktop/ct app/client/src/components/Whole”中的“/components/Center/CenterForm” 当我拆下中间部分时，左边是

CenterForm组件：

import React from 'react';
import Post from './Post';

const CenterForm = () =>

  <div className="col 4">
    <Post />
  </div>

export default CenterForm;

  import React from 'react';

  import LeftForm from './components/Left/LeftForm';
  import CenterForm from './components/Center/CenterForm';



const WholeComponent = () =>

<div className="container">
 <div className="row">
      <LeftForm />
      <CenterForm />
    </div>
  </div>

export default WholeComponent;

App.js: 

从“React”导入React；
从“./Post”导入Post；
常数中心形式=（）=>
导出默认的CenterForm；

Post组件（当我去实现用户评论功能时将被更改）：

从“React”导入React；
const Post=（）=>
邮局会在这里
导出默认帖子；

整个组成部分：

import React from 'react';
import Post from './Post';

const CenterForm = () =>

  <div className="col 4">
    <Post />
  </div>

export default CenterForm;

  import React from 'react';

  import LeftForm from './components/Left/LeftForm';
  import CenterForm from './components/Center/CenterForm';



const WholeComponent = () =>

<div className="container">
 <div className="row">
      <LeftForm />
      <CenterForm />
    </div>
  </div>

export default WholeComponent;

App.js: 

从“React”导入React；
从“./components/Left/LeftForm”导入LeftForm；
从“./components/Center/CenterForm”导入CenterForm；
常量整体组件=（）=>
导出默认的整体组件；
App.js：

从“React”导入React，{Component}

import Nav from "./components/Nav";

import WholeComponent from './components/Whole/WholeComponent';


class App extends Component {
  render() {
    return (
      <div className="App">
        <Nav />
        <WholeComponent />

      </div>
    );
  }
}

export default App;

从“/components/Nav”导入导航；
从“./components/Whole/WholeComponent”导入整体组件；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

---

谢谢社区

组件的路径为假

您在整个组件中的导入应该是这样的

  import LeftForm from '../Left/LeftForm';
  import CenterForm from '../Center/CenterForm';

---

因为，您需要将放置中间组件和左侧组件的目录向后移动。

您有错误的组件路径

您在整个组件中的导入应该是这样的

  import LeftForm from '../Left/LeftForm';
  import CenterForm from '../Center/CenterForm';

---

因为，您需要将中心和左侧组件所在的目录反向放置。

我收到：./src/components/all/WholeComponent.js模块未找到：无法在“/Users/edwarddeleon/Desktop/ct app/client/src/components/Whole”中解析“../components/CenterForm”！阿比德，谢谢你让我了解反向目录！我收到：./src/components/Whole/WholeComponent.js模块未找到：无法在“/Users/edwarddeleon/Desktop/ct app/client/src/components/Whole”中解析“../components/Center/CenterForm”，谢谢！阿比德，谢谢你让我了解反向目录！