LayoutComponent.tsx

import * as React from 'react';

export interface IPlaceholderProps {
    key: string;
    title: string;
    zoneId: string;
    children?: React.ReactElement | React.ReactElement[];
}

export class Placeholder extends React.Component<IPlaceholderProps, {}> {}
export interface ILayoutProps { }

export class LayoutComponent extends React.Component<ILayoutProps, {}> {
    private _renderZone(zoneId: string): JSX.Element {
        const childProps = React.Children.toArray(this.props.children)
            .filter((reactChild: React.ReactElement<IPlaceholderProps>) => {
                console.log("_renderZone() - Current child type: ", reactChild.type);
                console.log("_renderZone() - Current child type name: ", (reactChild.type as any).name);
                return reactChild.type
                    // Initial implemetation => WORKED IN DEBUG BUILD
                    // && (reactChild.type as any).name == "Placeholder"
                    && reactChild.type == Placeholder
                    && (reactChild.props.zoneId == zoneId);
            })
            .map((reactChild: React.ReactElement<IPlaceholderProps>) => reactChild.props);

        return <div>
            {childProps.map((c, i) => <div key={i}>
                {c.children}
            </div>)}
        </div>;
    }

    public render() {
        return <div>
            <h1>Zone 1</h1>
            {this._renderZone("1")}
            <h1>Zone 2</h1>
            {this._renderZone("2")}
            <h1>Zone 3</h1>
            {this._renderZone("3")}
        </div>;
    }
}
  
  // Some client code
  export default class ProdVsDebugLab extends React.Component<IProdVsDebugLabProps, {}> {

  public render(): React.ReactElement<IProdVsDebugLabProps> {

    doStuff(() => strings.DescriptionFieldLabel);

    return (
      <div className={styles.prodVsDebugLab}>
        <LayoutComponent>
          <Placeholder key="ph1" zoneId="3" title="This is it !">
            <div>Hello World !</div>
          </Placeholder>
          <Placeholder key="ph2" zoneId="1" title="This is foo !">
            <div>Foo !</div>
          </Placeholder>
          <Placeholder key="ph3" zoneId="2" title="This is bar !">
            <div>Bar !</div>
          </Placeholder>
        </LayoutComponent>
      </div>
    );
  }
}