如何编写组件中继器答案

【问题标题】：How to write component repeater如何编写组件中继器
【发布时间】：2019-11-03 07:46:09
【问题描述】：

比如有这样一个数组：

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

我必须编写一个可以循环输出这些数据的中继器组件。下面是一个使用这个组件的例子：

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

我可以在这个组件中写任何东西但数据必须各就其位

输出应该是

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

我收到了数据，在render中做了一个循环，但是this.props.children里面怎么传这个数据

我使用 react-jsx-parser。正因为如此，我不能使用这个功能，这样的答案也行不通

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

https://github.com/Abdubek/CustomComponent这里是最小项目

【问题讨论】：

使用一个函数作为子函数，它返回一个给定单个数据的组件。然后 Array#map 在父级中使用该函数：this.props.data.map(this.props.children)
感谢您的回答。这就是我立即做的。但我想给任何东西作为子组件，例如 {data.text} 或它应该输出一个跨度或按钮
@AbdubekZholay .map 允许您这样做 - array.map(x => <h1>{x.name}</h1>) 或 array.map(x => <button>{x.name}</button>)
@user633183 但 react-jsx-parser 不允许
@AbdubekZholay 是的 - 如果它没有编译，你的环境还有其他问题。提供的答案甚至包括一个功能演示。

标签： javascript reactjs jsx

【解决方案1】：

如果您使用子函数，您可以渲染将从该函数返回的自定义子组件。由于Each child in a list should have a unique "key" prop. 警告，您还应该传递key 属性。 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')
);

【讨论】：

感谢您的回答。可惜我写不出来：{data => (
{data.name}
)} react-jsx-parser 不允许
这是一种反模式。重复的组件应该定义为自己的组件，父组件应该简单地使用this.props.data.map(d => SeparateComponent(d))