在彼此內部使用反應組件（打字稿）

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> 
))