ReactコンポーネントでHTMLパーツを繰り返す

Question

他のコンポーネントとReactコンポーネントを複製しようとしています。

それがどのように可能です

<RepeatHtml number="5" child="<InputElement />" /> 

のように、私のコンポーネントは、セクション

class RepeatHtml extends React.Component { 
render() { 
    var names = new Array(parseInt(this.props.number)).fill().map((_, i) => i); 
    var namesList = names.map(function (name, index) { 
     return (
      <li>{index + 1}</li>); 
    }); 
    return <ul>{ namesList }</ul> 
    } 
} 

を繰り返すと私はそれで私の選択の別のコンポーネントを繰り返したいですか？

Answer 1

<Repeat num={ num } component={ InputElement } /> 

const Repeat = ({ num, component as Component }) => (
    <ul> 
    { 
     ... 
     names.map(name => (
     <li key={ uniqueKey }> 
      <Component /> 
     </li> 
    ) 
    } 
    </ul> 
) 

JSXを使用しないでコンポーネントを渡します。マップ内でJSXとしてレンダリングします。