javascript - 将无状态组件拆分为更小的部分

Question

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

如何拆分上述组件而不创建另一个新文件？我想重复使用<div>Block A</div>如果它是有状态组件，我可以简单地将它们分成函数并像 {this.renderBlockA()} 那样渲染它们。和{this.renderBlockB()}

Answer 1

您可以简单地在同一个文件中创建这些小组件

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

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