javascript - 如何正确拆分React应用程序组件

Question

我正在通过创建应用程序来学习 React，但我认为我低估了它的复杂性。让我与您分享，看看我是否正确:

这个想法是创建一个 React 应用程序来跟踪我想学习的科目。我创建了以下结构:

MainTopic:
-- title: String
-- percentage_completed: Number
-- Topic: Array
---- Subtopic: Array
---- title: String
---- percentage_completed: Number
------ Resources: Array
------ title: String
------ link: String
------ completed: Boolean

JSON 结构应如下所示 - 文档由其父级的 _id 固定:

{
    "title": String,
    "percentage_completed": Number
    "topic":[
    {
        "title":String,
        "percentage_completed":Number
        "subtopic":[
        {
            "title":String
            "percentage_completed": Number
            "resources":[
            {
                "title":String
                "link": String
                "concluded": Boolean
            }
            ]
        }
        ]
    }
    ]
}

每个主题称为 MainTopic，它下面有很多主题，例如:JavaScript 有 NodeJS、数据结构和算法作为主题，Express 是 Node 的子主题等等...

我有一个 NodeJS API 提供 JSON 服务，以获取已存储在数据库中的文档的完整列表及其每个特定部分、MainTopics、给定 MainTopic 的主题等。等等...这里是 JSON它返回:

[
    {
        "topics": [
            {
                "subtopics": [
                    {
                        "resources": [
                            {
                                "_id": "5b857b00c346783a24cbdbb5",
                                "subtopic_id": "5b857ad0c346783a24cbdbb4",
                                "title": "Udemy Course",
                                "link": "https://udemy.com/dictionaires-nodejs",
                                "concluded": false,
                                "__v": 0
                            }
                        ],
                        "_id": "5b857ad0c346783a24cbdbb4",
                        "title": "Dictionaries",
                        "percentage_concluded": 0,
                        "topic_id": "5b857a12c346783a24cbdbae",
                        "__v": 0
                    }
                ],
                "_id": "5b857a12c346783a24cbdbae",
                "maintopic_id": "5b8565b90c927b2c47df7d9d",
                "title": "Node.js",
                "percentage_concluded": 0,
                "__v": 0
            },
            {
                "subtopics": [
                    {
                        "resources": [],
                        "_id": "5b857ab8c346783a24cbdbb3",
                        "title": "Lists",
                        "percentage_concluded": 0,
                        "topic_id": "5b857a1ac346783a24cbdbaf",
                        "__v": 0
                    }
                ],
                "_id": "5b857a1ac346783a24cbdbaf",
                "maintopic_id": "5b8565b90c927b2c47df7d9d",
                "title": "Java",
                "percentage_concluded": 0,
                "__v": 0
            },
            {
                "subtopics": [
                    {
                        "resources": [
                            {
                                "_id": "5b857a91c346783a24cbdbb2",
                                "subtopic_id": "5b857a6ec346783a24cbdbb1",
                                "title": "Udemy Course",
                                "link": "https://udemy.com",
                                "concluded": false,
                                "__v": 0
                            }
                        ],
                        "_id": "5b857a6ec346783a24cbdbb1",
                        "title": "Variables",
                        "percentage_concluded": 0,
                        "topic_id": "5b857a21c346783a24cbdbb0",
                        "__v": 0
                    }
                ],
                "_id": "5b857a21c346783a24cbdbb0",
                "maintopic_id": "5b8565b90c927b2c47df7d9d",
                "title": "Python",
                "percentage_concluded": 0,
                "__v": 0
            }
        ],
        "_id": "5b8565b90c927b2c47df7d9d",
        "title": "Programming Languages",
        "percentage_concluded": 30,
        "__v": 0
    }
]

我想启动 React 部分，但我真的不确定如何构建它，我的意思是，我应该创建 1 个组件来处理请求的全部数据量，还是应该为每个移动部分创建一个组件？就像...一个用于主主题的组件，一个用于主题，一个用于子主题，一个用于每个资源。

到目前为止，我有以下 Reac 代码:

App.js
components/
  Learning.js
  Resource.js
  Header.js

主应用程序文件App.js

import React, { Component } from 'react';
import Header from './components/Header';

import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Learning from './components/Learning';

import './index.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header branding="Learn Tracker"/>
        <div className="container">
          <Learning />
        </div>
      </div>
    );
  }
}

export default App;

另一个Learning.js:

import React, { Component } from 'react'
import Resource from './Resource';
import axios from 'axios';


class Learning extends Component {
    constructor(props){
        super(props);
        this.state = {
            resource: [{}]
        }
        this.fetchData();
    }

    fetchData(){
        axios.get('/api/all')
            .then(result => {
                this.setState({resource: result.data});
            })
            .catch(err => {
                console.log(err);
            });
    }

    render() {
        const {resource} = this.state;
        resource.map((resource) => {
            return (
                <Resource resource={resource} />
            )
        });
        return(
            <div>
                {resource}
            </div>
        );
    }
}

export default Learning;

Resource.js:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Resource extends Component {
  render() {
      const {resource} = this.props;
    return (
        <div className="card mb-3">
        <div className="card-header">
          <h4>{ resource[0].maintopic.title }</h4>
        </div>
        <div className="card-body">
            <h4 className="card-title">{ resource[0].maintopic.topic.title }</h4>
          <ul className="list-group">
            <li className="list-group-item">
            { resource[0].maintopic.topic.subtopic.title }
              <div className="card-body">
                <ul className="list-group list-group-flush">
                  <li className="list-group-item">Title: { resource[0].maintopic.topic.subtopic.resources[0].title }</li>
                  <li className="list-group-item">Link: { resource[0].maintopic.topic.subtopic.resources[0].link }</li>
                  <li className="list-group-item">Concluded: { resource[0].maintopic.topic.subtopic.resources[0].concluded }</li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    )
  }
}

Resource.propTypes = {
    resource: PropTypes.object.isRequired
}

export default Resource;

最后是 Header.js:

import React from 'react'
import PropTypes from 'prop-types';

import 'bootstrap/dist/css/bootstrap.min.css';
import '../App.css';
import '../index.css';

const Header = props => {
    const { branding } = props;

    return (
      <nav className="navbar navbar-expand-sm navbar-dark bg-primary mb-3 py-3">
        <div className="container">
            <a href="/" className="navbar-brand">{branding}</a>
            <div>
                <ul className="navbar-nav mr-auto">
                    <li className="nav-item">
                        <a href="/" className="nav-link">Home</a>
                    </li>
                    <li className="nav-item text-white"><p className="nav-link"><span className="branco">|</span></p></li>
                    <li className="nav-item">
                        <a href="/" className="nav-link">About</a>
                    </li>
                </ul>
            </div>
        </div>
      </nav>
    )
}

Header.defaultProps = {
    branding: "Learning Tracker"
}

Header.PropTypes = {
    branding: PropTypes.string.isRequired
}
export default Header;

请帮助我了解如何找到应用程序结构的最佳解决方案。

提前谢谢您。

致以诚挚的问候。

Answer 1

我认为在 React 中安排文件结构的最佳和最简单的方法是使用独立组件。在这种方法下，您可以用尽可能小的单元(组件)构建您的应用程序。这些组件将包含在任何地方运行所需的所有组件。这种方法的主要优点是它鼓励高水平的代码可重用性。

如果您拔出一个组件并将其插入到一个完全不同的应用程序中，它的运行方式将与在之前的应用程序中运行的方式完全相同。下面介绍了如何构建您的应用程序；

├── src
│   ├── components                 // Dumb components should go here -> they should be stand-alone components
│   │   ├── App                    // App should should render all the main topics
│   │   │   ├── index.js           // Component logic and jsx
│   │   │   ├── index.test.js      // Component tests
│   │   │   ├── index.css          // Component styles
│   │   ├── Header                   // All components should have their own index.js and index.test.js files
│   │   │   ├── index.js           // Component logic and jsx
│   │   │   ├── index.test.js      // Component tests
│   │   │   ├── index.css          // Component styles
│   │   ├── MainTopic              // MainTopic should be a component on its own because it's repeated. It's in an array.
│   │   │   ├── index.js           // Component logic and jsx
│   │   │   ├── index.test.js      // Component tests
│   │   │   ├── index.css          // Component styles
│   │   ├── SubTopic               // SubTopic should be a component on its own because it's repeated. It's in an array.
│   │   │   ├── index.js           // Component logic and jsx
│   │   │   ├── index.test.js      // Component tests
│   │   │   ├── index.css          // Component styles
│   │   ├── Topic                  // Topic should be a component on its own because it's repeated. It's in an array.
│   │   │   ├── index.js           // Component logic and jsx
│   │   │   ├── index.test.js      // Component tests
│   │   │   ├── index.css          // Component styles
│   ├── index.test.js              // Tests for non-components files
│   ├── index.js
│   ├── routes.js                  // All routes should be registered here