javascript - Underhålla en lista med React-komponenter och sedan rendera dem i föräldern

Jag har en hypotetisk fråga om att underhålla en array av polymorfa React-komponenter. Är det möjligt/bra React-praxis att underhålla en array av komponenter som är ättlingar till en gemensam komponent och sedan rendera dem i containern? Till exempel:

import * as React from 'react';

import GenericBlock from './GenericBlock';
import { BlockTypeA, BlockTypeB, BlockTypeC } from './MyBlocks';

export default class BlockHolder extends React.Component {
    blocks : GenericBlock[] = [ <BlockTypeA />, <BlockTypeB />, <BlockTypeC /> ];

    render() {
        return (
            <div id="workspace">
                {
                    this.blocks
                }
            </div>);
    };
};

GenericBlock.tsx

import * as React from 'react';

export default class GenericBlock extends React.Component {
    render() { return (<div></div>); }
}

MyBlocks.tsx:

import * as React from 'react';

import GenericBlock from './GenericBlock';

class BlockTypeA extends GenericBlock {
    render() { return (<div></div>); }
};

class BlockTypeB extends GenericBlock {
    render() { return (<div></div>); }
};

class BlockTypeC extends GenericBlock {
    render() { return (<div></div>); }
};

export { BlockTypeA, BlockTypeB, BlockTypeC };

Ovanstående kodavsnitt ger felet: Objects are not valid as a React child, men jag tror att det fångar essensen av vad jag pratar om. Finns det ett sätt att få ovanstående schema att fungera?

Jag är säker på att den här frågan redan har ställts och besvarats, men jag verkar inte kunna få Google-sökningen rätt.

REDIGERA:

Lade till Sandbox-länk: https://codesandbox.io/s/wizardly-wilson-vb7nn

Nu stöter jag på ett nytt fel: Typen 'Element' saknar följande egenskaper från typen 'GenericBlock': render, context, setState, forceUpdate, och 2 till.

REDIGERA 2:

Att skriva blocks-arrayen som JSX.Element tar bort felet och får allt att fungera, men det verkar inte vara särskilt bra praxis eftersom JSX.Element kan vara vilket element som helst, medan poängen med att skriva det som GenericBlock är att säkerställa att alla elementen är underordnade en specifik komponent.

Svar #1

i React-kod fungerar det perfekt: https://codesandbox.io/s/optimistic-ptolemy-g25ge

inga fel, inga varningar

import * as React from "react";

import { BlockTypeA, BlockTypeB, BlockTypeC } from "./MyBlocks";

export default class BlockHolder extends React.Component {
  blocks = [
    <BlockTypeA key={1} />,
    <BlockTypeB key={2} />,
    <BlockTypeC key={3} />
  ];

  render() {
    return <div id="workspace">{this.blocks}</div>;
  }
}

import * as React from "react";

export default class GenericBlock extends React.Component {
  render() {
    return <div />;
  }
}

import * as React from 'react';

import GenericBlock from './GenericBlock';

class BlockTypeA extends GenericBlock {
    render() { return (<div>A</div>); }
};

class BlockTypeB extends GenericBlock {
    render() { return (<div>B</div>); }
};

class BlockTypeC extends GenericBlock {
    render() { return (<div>C</div>); }
};

export { BlockTypeA, BlockTypeB, BlockTypeC };

"dependencies": {
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "react-scripts": "3.0.1"
  },
  "devDependencies": {
    "typescript": "3.8.3"
  }