Как написать компонентный повторитель

Question

например, есть такой массив:

let array = [ { name: "QWE" }, { name: "ASD" } ]

Я должен написать компонент Repeater, который будет выводить эти данные в цикле. Вот пример использования этого компонента:

<Repeater data={array}>
    <h1>{data.name}</h1>
</Repeater>

Я могу написать что-нибудь внутри этого компонента но данные должны быть помещены каждый на свое место

вывод должен быть

<h1>QWE</h1><h1>ASD</h1>

Я получил данные, сделал рендер в цикле, но как передать эти данные в this.props.children

Я использую реагирующий-jsx-парсер. и из-за этого я не могу использовать функцию, и такие ответы не будут работать

data => (<h1 key = {data.key}>{data.name}</h1>)

https://github.com/Abdubek/CustomComponent вот минимальный проект

Answer 1

Если вы используете дочернюю функцию, вы можете отобразить пользовательский дочерний компонент, который будет возвращен из функции. Вы также должны передать key реквизит из-за Each child in a list should have a unique "key" prop. предупреждения. Здесь является примером.

const data = [{ name: 'QWE' }, { name: 'ASD' }]

const Repeater = ({ children, data }) => (
    data.map((itemData, i) => (
        children({ ...itemData, key: i })
    ))
)

const Root = () => (
  <Repeater data={data}>
    {data => (
      <h1 key={data.key}>
          {data.name}
      </h1>
    )}
  </Repeater>
)


ReactDOM.render(
  <Root />,
  document.getElementById('container')
);