我有带 s 的表单元素label,并且希望使用唯一 ID 将labels 链接到带属性的元素htmlFor。如下所示:
label
htmlFor
React.createClass({ render() { const id = ???; return ( <label htmlFor={id}>My label</label> <input id={id} type="text"/> ); } });
我以前根据 生成 ID,this._rootNodeID但从 React 0.13 开始它不再可用。现在最好的和/或最简单的方法是什么?
this._rootNodeID
这个解决方案对我来说很有效。
utils/newid.js:
utils/newid.js
let lastId = 0; export default function(prefix='id') { lastId++; return `${prefix}${lastId}`; }
我可以像这样使用它:
import newId from '../utils/newid'; React.createClass({ componentWillMount() { this.id = newId(); }, render() { return ( <label htmlFor={this.id}>My label</label> <input id={this.id} type="text"/> ); } });
但它在同构应用程序中不起作用。
import React, { useState } from 'react'; import _uniqueId from 'lodash/uniqueId'; const MyComponent = (props) => { // id will be set once when the component initially renders, but never again // (unless you assigned and called the second argument of the tuple) const [id] = useState(_uniqueId('prefix-')); return ( <div> <input id={id} type="checkbox" /> <label htmlFor={id}>label</label> </div> ); }