HTML-Teile mit React-Komponente wiederholen

Question

Ich versuche, eine React-Komponente mit einer anderen Komponente zu duplizieren.

My-Komponente einen Abschnitt

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

zu wiederholen Und ich möchte mit, dass eine weitere Komponente meiner Wahl wiederholen, wie

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

Ist es möglich, wie?

Answer 1

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

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

Sie übergeben die Komponente als Requisiten, verwenden Sie nicht JSX. und dann in Ihrer Map als JSX rendern.