使用React Component

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。