Question

我正在启动一个React项目。我正在尝试构建留言板页面，并且我有页面左侧，中间和右侧部分的组件。该中心是用户帖子的用途。左右是新闻，事件......等。

我的文件结构如下：

--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 找不到模块：无法解析＆＃39; ./ components / Center / CenterForm＆＃39; in＆＃39; / Users / edwarddeleon / Desktop / ct-app / client / src / components / Whole＆＃39; 当我移除中心部分时为左。

CenterForm组件：

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

const CenterForm = () =>

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

export default CenterForm;

Post Component（当我去实现用户评论功能时会更改）：

import React from 'react';

const Post = () =>

  <div className="posthere">
    <span>post will be here</span>
  </div>

export default Post;

整个组件：

  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，{Component}来自＆＃39;反应＆＃39 ;;

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;

谢谢社区！

Answer 1

您有该组件的错误路径。

您在WholeComponent中的导入应该是这样的

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

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

React：组件结构，是否脱离使用环境？

1 个答案: