reactjs - HOC组件如何设置key？

Question

class Demo extends Component {
  render() {
    const { list } = this.state
    return (
      <div>
        {list.map(this._renderItem)}
      </div>
    )
  }
  _renderItem = item => {
    const Item = withSwipeDelete(
      <div>{item.id}</div>,
      () => console.log('callback')
    )
    return <Item />
  }
}

这是我的代码的一个示例，其中警告：列表中的每个孩子都应该有一个唯一的“键”道具。

所以我尝试了：

  _renderItem = item => {
    const Item = withSwipeDelete(
      <div key={item.id}>{item.id}</div>, // add key here
      () => console.log('callback')
    )
    return <Item />
  }

和这个：

  _renderItem = item => {
    const Item = withSwipeDelete(
      <div>{item.id}</div>,
      () => console.log('callback')
    )
    return <Item key={item.id} /> // add key here
  }

两者都不起作用。

withSwipeDelete是一个高阶组件：

export default function withSwipeDelete(Cell, onDelete) {
  return class extends Component {
    render() {
      return (
        <div>
          {Cell}
        </div>
      )
    }
  }
}

Answer 1

您发布的第二个解决方案应该可以工作：

_renderItem = item => {
    const Item = withSwipeDelete(
      <div>{item.id}</div>,
      () => console.log('callback')
    )
    return <Item key={item.id} /> // add key here
}

我在这里试过https://codesandbox.io/s/brave-http-3w3ki

只要 id 是唯一的，控制台中就不会出现错误。

说明：React 会要求您在尝试渲染项目数组的地方放置一个键。如果我们简化您的代码（不管 HOC 是什么），您实际上是<div>在主渲染中渲染一个数组。这意味着您有一个<Item />组件数组（因为这是_renderItem将返回的内容），因此，您需要为每个<Item />.