我有具有label
的表单元素,并且我希望有唯一的ID来将label
链接到具有htmlFor
属性的元素。如下所示:
React.createClass({
render() {
const id = ???;
return (
<label htmlFor={id}>My label</label>
<input id={id} type="text"/>
);
}
});
我曾经基于this._rootNodeID
生成I,但是从React 0.13开始就不能使用了。现在最好和/或最简单的方法是什么?
发布于 2016-01-09 00:58:10
您可以使用像node-uuid这样的库来确保获得惟一的ids。
使用以下命令进行安装:
npm install node-uuid --save
然后在react组件中添加以下内容:
import {default as UUID} from "node-uuid";
import {default as React} from "react";
export default class MyComponent extends React.Component {
componentWillMount() {
this.id = UUID.v4();
},
render() {
return (
<div>
<label htmlFor={this.id}>My label</label>
<input id={this.id} type="text"/>
</div>
);
}
}
发布于 2017-07-13 04:02:00
希望这对任何寻求通用/同构解决方案的人都有帮助,因为校验和问题是我最初来到这里的原因。
如上所述,我已经创建了一个简单的实用程序来按顺序创建一个新的id。由于I在服务器上不断递增,并且在客户端从0重新开始,因此我决定在每次SSR启动时重新设置递增。
// utility to generate ids
let current = 0
export default function generateId (prefix) {
return `${prefix || 'id'}-${current++}`
}
export function resetIdCounter () { current = 0 }
然后在根组件的构造函数或componentWillMount中调用重置。这实际上在每个服务器呈现中重置了服务器的JS作用域。在客户端,它没有(也不应该)有任何影响。
发布于 2021-10-12 09:50:40
没有使用钩子的Lodash版本:
function useUniqueId() {
const [id] = useState(() => `component-${Math.random().toString(16).slice(2)}`)
return id
}
https://stackoverflow.com/questions/29420835
复制相似问题