How to combine two SPFx web parts?

Question

We have two separate SPFx web parts (call them A and B), and you can add A and/or B to same SharePoint Online site.

Now there is a need to create web part C that combines both A and B into single web part (in new C web part the A will be top and the B below it).

Some SharePoint content in here
<A>
<B>
More SharePoint content

A and B will be developed separately and they should still work independently, and the combination C should always match latest development state of A and B.

Both A and B are based on BaseClientSideWebPart,

export default class AWebPart extends BaseClientSideWebPart<IAWebPartProps>
and
export default class BWebPart extends BaseClientSideWebPart<IBWebPartProps>

So what is the easiest way to do this? Can I create a new web part that imports both AWebPart and BWebPart and combines them to single React render command?

Answer 1

Have web part C import the components for the other two web parts. Use shared services to load data for A and B, and reuse them in web part C.

import ComponentA from './../../webparts/WebPartA/components/ComponentA';
import ComponentB from './../../webparts/WebPartB/components/ComponentB';

import ServiceA from './../../services/WebPartAService';
import ServiceB from './../../services/WebPartBService';

The way the SPFX tooling puts components underneath specific web parts is not ideal. Ideally, components would be completely separate from web parts, because in non trivial projects this type of component sharing happens all the time.

Answer 2

@Derek Gusoff is right as I too can't think of why you would want to embed or import web parts into each other and what you're probably after is designing using de-coupled style and have nth number of components and export/import them as you wish. Having to embed web parts into each other is like in Visual Studio and trying to import a solution into another solution, it can be hacked but it's not common or standard practice. You want to do it so different developers can develop independently esp in a very large apps, where components are devised to separate devs and this can be achieved by embedding components within each other. In terms of data passing, let's say from an API, then the parent (Smart/Container component) can do the fetch and pass data down to children (Dumb/Presentation components) as Props.

I initially had same question when I started out...with SPFX.

So in short you want to join and import Components, not Web Parts and the Services will be your data or APIs, can be passed down as Props.