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内部传输数据

我使用react-jsx-parser。因此，我无法使用该功能，并且这样的答案将无效

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.道具。 Here是示例。

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')
);

如何编写组件中继器

1 个答案: