在彼此内部使用反应组件（打字稿）

Question

我想创建一个SkillList组件，它显示SkillListItem（它也是一个组件）的列表，但我很困惑如何格式化它，因为skilllist不是一个项目，但是可以通过它的道具来定义？任何帮助？

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

是你的问题是问如何通过一个完整的道具对象直接到一个新的组件实例？

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