ReactJS约定：[关闭]

Question

关闭。这个问题是opinion-based。它当前不接受答案。

---

是否要改进此问题？更新问题，以便editing this post可以用事实和引用来回答。

关闭3分钟前。

我具有三个相关的组件，以它们都提供内容的方式。

不是将其分成三个文件，而是将其放在一个文件中并导出。我这样做是为了节省一些AWS S3定价，并最大程度地减少了我切换的选项卡数量。

Content.js

import React from "react"

export const ContentCenter = ({ children, cta }) => {
  return (
    <div id="services" class="cards-1">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            {children}
            {cta}
          </div>
        </div>
      </div>
    </div>
  )
}

export const ContentLeft = ({ children, img, cta }) => {
  return (
    <div id="students" class="cards-1">
      <div class="basic-1">
        <div class="container">
          <div class="row">
            <div class="col-lg-6">
              <div class="text-container">
                {children}
                {cta}
              </div>
            </div>
            <div class="col-lg-6">
              <div class="image-container">{img}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export const ContentRight = ({ children, img, cta }) => {
  return (
    <div id="causes" class="cards-1">
      <div class="basic-2">
        <div class="container">
          <div class="row">
            <div class="col-lg-6">
              <div class="image-container">{img}</div>
            </div>
            <div class="col-lg-6">
              <div class="text-container">
                {children}
                {cta}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

然后我使用]导入

import { ContentLeft, ContentRight, ContentCenter } from "../components/Content"
我的问题是以下惯例？

我将其放在一个文件中的理由有效吗？

我具有三个相关的组件，以它们都提供内容的方式。我没有将其分成三个文件，而是将其放在一个文件中并导出。我这样做是为了在AWS S3上节省一点...

Answer 1

这是组织组件的一种完全有效的方法。您不必将每个小组件都放在自己的文件中。就性能或托管价格而言，它根本没有任何作用。

Answer 2

这是一个问题，分为两个部分：1.是否将三个潜在组成部分合而为一为您或任何人节省了什么？