React Node Key

English | 中文说明

自动生成 React 组件 key 值，按渲染位置标记

兼容性

• React v16+

• Preact v10+

---

安装

yarn add react-node-key
# 或者
npm install react-node-key

---

使用方式

1. babel 配置文件 .babelrc 中增加 react-node-key/babel 插件

为什么需要它？

该插件会于编译阶段在各 JSX 元素上增加 _nk 属性，帮助 react-node-key 在运行时按渲染位置生成唯一的缓存 id 标识

{
  "plugins": [
    "react-node-key/babel"
  ]
}

2. Use <NodeKey> as your component's wrapper

import React from 'react'
import ReactDOM from 'react-dom'
import NodeKey from 'react-node-key'

import Test from './Test'

ReactDOM.render(
  <NodeKey>{nodeKey => <Test key={nodeKey} />}</NodeKey>,
  document.getElementById('root')
)