将无状态组件拆分为较小的部分

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

Answer 2

你需要问自己一个问题：

“我需要状态和生命周期方法吗？”你可以找到关于这个主题here的更多信息。

如果需要有状态的es6类组件，只需在同一个文件中创建一个。 React.Component

如果你只需要一个哑（无状态）组件，这基本上只是你的UI的代表，你可以在同一个文件中写一个function component，或者使用像styled-components或glamorous这样的东西来生成带有样式的html元素。