如何为 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 />
  }
}

这是我的代码示例，其中警告：列表中的每个 child 都应该有一个唯一的 "key" prop。

所以我尝试了：

  _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 是 higher-order-components:

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 会 return 的），因此，每个 <Item /> 都需要一个键。

如何为 HOC 组件设置 key？

How to set keys for HOC components?

reactjs

eslint

high-order-component