如何组织用于许多组件的1个功能？

Question

我仍然是Reactjs的新手，我有一个项目可以通过API成功获得交易数据后实现小吃店。这是文件结构

• src（文件夹）
  • home.js
  • Navigation.js
  • 部门（文件夹）
    add-modal.js
    实现了小吃店
  • edit-modal.js
    实现了小吃店
  • department.js
    实现了小吃店

如您所见，我必须重复此步骤。当我在较大的项目上使用小吃店或swal时，这将是一个问题。我必须多次导入并多次设置所有相关变量。我们可以使用模型吗？还是将快餐栏实现包装在一个组件中，并使用事件发射器或任何组件通信工具？有什么建议吗？

import React, { Component } from "react";
import { Modal, Button, Row, Col, Form } from "react-bootstrap";
import Snackbar from "@material-ui/core/Snackbar";
import IconButton from "@material-ui/core/IconButton";

export class AddModal extends Component {
  constructor(props) {
    super(props);
    this.state = { departments: [], snackbaropen: false, snackbarmsg: "" };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  snackbarclose = event => {
    this.setState({ snackbaropen: false });
  };

  handleSubmit(event) {
    event.preventDefault();
    fetch("http://localhost/lumen/udemy-react-api/public/api/departments", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-type": "application/json"
      },
      body: JSON.stringify({
        id: null,
        name: event.target.name.value
      })
    })
      .then(response => response.json())
      .then(result => {
        this.setState({ snackbaropen: true, snackbarmsg: result.message });
        console.log(this.state.snackbaropen);
      });
  }
  render() {
    // const { departments } = this.state;
    return (
      <div className="container">
        <Snackbar
          anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
          open={this.state.snackbaropen}
          autoHideDuration={10000}
          onClose={this.snackbarclose}
          message={<span id="message-id">{this.state.snackbarmsg}</span>}
          action={[
            <IconButton
              key="close"
              arial-label="Close"
              color="inherit"
              onClick={this.snackbarclose}
            />
          ]}
        />
        <Modal
          {...this.props}
          size="lg"
          aria-labelledby="contained-modal-title-vcenter"
          centered
        >
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title-vcenter">
              Add Department
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <div className="container">
              <Row>
                <Col sm={6}>
                  <Form onSubmit={this.handleSubmit}>
                    <Form.Group controlId="name">
                      <Form.Label>Name :</Form.Label>
                      <Form.Control
                        type="text"
                        name="name"
                        placeholder="Department Name"
                        required
                      />
                    </Form.Group>
                    <Form.Group>
                      <Button type="submit" variant="primary">
                        Add
                      </Button>
                    </Form.Group>
                  </Form>
                </Col>
              </Row>
            </div>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.props.onHide} variant="danger">
              Close
            </Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}