Mit react Komponenten ineinander (Typoskript)

Question

Ich versuche, eine SkillList-Komponente zu erstellen, die eine Liste von SkillListItem (die auch eine Komponente ist), aber ich bin verwirrt, wie dies zu formatieren, weil skilllist ist kein Element aber kann durch seine Requisiten definiert werden? irgendeine Hilfe?

SkillListItem:

import * as React from 'react'; 

    export interface SkillListItemProps { 
     name: string 
     color: string 
     icons?: string[] 
    } 

    interface SkillListItemState{ 
    } 

    export class SkillListItem extends React.Component<SkillListItemProps,SkillListItemState>{ 
     public render(): JSX.Element{ 
      const {name, color, icons} = this.props; 

      let iconDisplay = null; 
      if (icons != null){ 
       iconDisplay = icons.map((ic, index) => <i className={ic} key={index}>{'\u00A0'}</i>) 
     } 
     return (
      <div className="SkillListItem"> 
       <span style={{color: color } }>{name}</span> 
       {iconDisplay} 
      </div> 
     ) 
     } 
    } 

SkillList:

import * as React from 'react'; 
import "./styles.scss"; 
import {SkillListItemProps, SkillListItem} from "./SkillListItem" 

interface SkillListProps { 
    title: string 
    items?: SkillListItemProps[] 
} 

interface SkillListState{ 
} 

export class SkillList extends React.Component<SkillListProps,SkillListState>{ 
    public render(): JSX.Element{ 
     const {title, items} = this.props; 

     let listDisplay = null; 
     if (items != null){ 
      listDisplay = items.map(it => <li>{SkillListItem.arguments(it)}</li>) 
     } 
    return (
     <div className="KVControl"> 
       <h1>{title}</h1>: 
       <ul> 
        {listDisplay} 
       </ul> 

     </div> 
    ) 
    } 
} 

Answer 1

Ist Ihre Frage, wie verlangt eine volle Requisiten direkt in eine neue Komponenteninstanz Objekt zu übergeben?

listDisplay = items.map(itemProps => (
    <li> 
    { React.createElement(SkillListItem, itemProps) } 
    </li> 
))