Some React components have a declarative parent-child relationship (like [Compound Components](https://blog.logrocket.com/guide-to-react-compound-components-9c4b3eb482e9)).

While this is not an issue in itself, sometimes this relationship is very strict, such that only components at the first level after the parent **can be** valid `children` of it. for example:

```tsx
function Tabs() { return <div className="tabs">...</div> }

class Tab() {
    render() { return <div className="tab">...</div> }
}

// Valid
<Tabs>
    <Tab label="First tab">
        <div>first tab content</div>
    </Tab>

    <Tab label="Second tab" active>
        <div>second tab content</div>
    </Tab>
</Tabs>

// Invalid (in a strict relationship)
<Tabs>
    <div>
        <Tab label="First tab">
            <div>first tab content</div>
        </Tab>
    </div>

    <div>
        <Tab label="Second tab" active>
            <div>second tab content</div>
        </Tab>
    </div>
</Tabs>
```

In the above example the `div`s wrapping the `Tab` components don't make a lot of sense, but when you look how at a naive approach when using Angular-React would work, you'd get this in the DOM:

```html
<fab-tabs>
  <div class="tabs">
    <fab-tab>
      <div class="tab">...</div>
    </fab-tab>

    <fab-tab>
      <div class="tab">...</div>
    </fab-tab>
  </div>
</fab-tabs>
```

Which wouldn't work if the internal implementation of Tabs is strict:

```javascript
props.children.filter(child => child instanceof Tab);
```

For these case the `Disguise` component was created - which accepts all the relevant inputs and renders things in React rather than in Angular, as much as possible:

```typescript
interface DisguiseProps {
  /**
   * The type to render the root component as.
   * @default React.Fragment
   */
  disguiseRootAs?: React.ReactType;

  /**
   * The type to render the child components as.
   * @default the Children's own type.
   */
  disguiseChildrenAs?: React.ReactType;

  /**
   * The Angular child components to render.
   */
  ngChildComponents?: ReactWrapperComponent<any>[];
}
```

This allows exposing the API as described above to the wrapper component's users (app), while the internal implementation is a bit more complex.

Two of the components that use these come from the [Fabric package](./Wrapper-libraries:-Fabric.md):

- [`Link`](https://developer.microsoft.com/en-us/fabric#/components/link) - Since it accepts an (optional) `as` input (exposed as `linkAs` in `<fab-link>`, due to Angular compiler restrictions)
- [`Pivot`](https://developer.microsoft.com/en-us/fabric#/components/pivot) - For the exact reasons described above - it has a strict implementation, not allowing putting any React elements between the `Pivot` and `PivotItem` components (besides `React.Fragment`, which `Disguise` leverages).

## `passProp` decorator

> Decorator to specify a property that should be passed as a prop to the underlying React component implicitly.
> Mainly useful for passing child components using the `Disguise` component.

When using the `Disguise` component to render strict parent-children relationships, you still need to somehow pass `Input`s passed to the child wrapper components to the actual child React elements that will be created within `Disguise`. The `passProp` decorator solves this, and allows specifying an implicit way to pass down props to these elements.