用React組件重複HTML部件

Question

我試圖用另一個組件複製React組件。

我的組件來重複部分

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

我想重複我的選擇與另一個組件，如

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

是否有可能如何？

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。