用React组件重复HTML部件

我试图用另一个组件复制React组件。用React组件重复HTML部件

我的组件来重复部分

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 />" />

是否有可能如何？

来源

2017-03-22 Fridez Lucas

您正在将数字作为道具发送到RepeatHTML，您可以在for循环中做到这一点，并根据需要重复多次 – Nicholas

是的，但我的目的是使用此RepeatHtml组件和任意数量（1,2 ，3，4等）。 –

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

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

您将组件作为道具传递，不使用JSX。然后在你的地图中，将其渲染为JSX。

来源

2017-03-22 09:57:49

用React组件重复HTML部件

回答

相关问题