React Node Key

English | 中文说明

Automatic key-marked for React nodes, generate an unique identifier by render location

---

Compatibility

• React v16+

• Preact v10+

---

Install

yarn add react-node-key
# or
npm install react-node-key

---

Usage

1. Add react-node-key/babel plugins in .babelrc

Why is it needed?

The plugin adds a _nk attribute to each JSX element during compilation to help the react-node-key runtime generate an unique identifier by render location.

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

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

importReactfrom'react'importReactDOMfrom'react-dom'importNodeKeyfrom'react-node-key'importTestfrom'./Test'ReactDOM.render(<NodeKey>{nodeKey=><Testkey={nodeKey}/>}</NodeKey>,document.getElementById('root'))