Javascript 将无状态组件拆分为较小的部分 constmycomponent=（）=>( A区 B区 ) 导出默认MyComponent

如何在不创建另一个新文件的情况下拆分上述组件？我想重用

块A

如果它是有状态的组件，我可以简单地将它们拆分为函数，并像

{this.renderBlockA（）}

和

{this.renderBlockB（）}

那样呈现它们，您可以在同一个文件中创建这些小组件

const MyComponent = () => (
    <div>
       <div>Block A</div>
       <div>Block B</div>
    </div>
)
export default MyComponent

export const BlockA=（）=>块A
导出常量块B=（）=>块B
常量MyComponent=（）=>(
)
导出默认MyComponent

你需要问自己一个问题：

“我需要状态和生命周期方法吗？”您可以找到有关此主题的更多信息

如果您需要一个有状态的es6类组件，只需在同一个文件中创建一个即可

---

如果您只需要一个哑（无状态）组件，它基本上只是您的UI的表示，那么您可以在同一个文件中编写一个，或者使用类似或的东西来生成带有样式的html元素

为什么要拆分组件而不创建新文件？澄清：我认为您应该始终将组件放在单独的文件中。@AVAVT我不想创建太多的文件。每个文件可以包含多个组件，但其他文件可以使用BlockA吗？像从“myComponent”导入{BlockA}一样？是的，它可以，但是如果您不希望其他人从外部重用这些组件，您可以切断导出

export const BlockA = () => <div>Block A</div>
export const BlockB = () => <div>Block B</div>

const MyComponent = () => (
    <div>
       <BlockA/>
       <BlockB/>
    </div>
)
export default MyComponent