我有带有labels 的表单元素，我希望有唯一的 ID 将labels链接到具有htmlFor属性的元素。像这样的东西：
React.createClass({
render() {
const id = ???;
return (
<label htmlFor={id}>My label</label>
<input id={id} type="text"/>
);
}
});
我曾经基于this._rootNodeID它生成 ID，但自 React 0.13 以来它不可用。现在最好和/或最简单的方法是什么？
id 应该放在componentWillMount (update for 2018) 中constructor，而不是render. 将其放入render会不必要地重新生成新的 ID。
如果您使用下划线或 lodash，则有一个uniqueId函数，因此您的结果代码应该类似于：
constructor(props) {
super(props);
this.id = _.uniqueId("prefix-");
}
render() {
const id = this.id;
return (
<div>
<input id={id} type="checkbox" />
<label htmlFor={id}>label</label>
</div>
);
}
2019 年钩子更新：
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>
);
}
这个解决方案对我来说很好。
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"/>
);
}
});
但它不适用于同构应用程序。
添加 17.08.2015。相反，自定义NEWID的功能，您可以使用UNIQUEID从lodash。
2016 年 1 月 28 日更新。最好在componentWillMount.
从 2019-04-04 开始，这似乎可以通过 React Hooks' 来完成useState：
import React, { useState } from 'react'
import uniqueId from 'lodash/utility/uniqueId'
const Field = props => {
const [ id ] = useState(uniqueId('myprefix-'))
return (
<div>
<label htmlFor={id}>{props.label}</label>
<input id={id} type="text"/>
</div>
)
}
export default Field
据我了解，您忽略了数组解构中允许您更新的第二个数组项id，现在您获得了一个在组件的生命周期内不会再次更新的值。
的值id将是myprefix-<n>其中<n>是从返回增量的整数值uniqueId。如果这对您来说还不够独特，请考虑制作自己的喜欢
function gen4() {
return Math.random().toString(16).slice(-4)
}
function simpleUniqueId(prefix) {
return (prefix || '').concat([
gen4(),
gen4(),
gen4(),
gen4(),
gen4(),
gen4(),
gen4(),
gen4()
].join(''))
}
或查看我在这里发布的库：https : //github.com/rpearce/simple-uniqueid。还有成百上千个其他唯一 ID 的东西，但是uniqueId带有前缀的lodash应该足以完成工作。
感谢@Huong Hk 将我指向hooks lazy initial state，总而言之，您可以将一个函数传递给该函数，useState该函数只能在初始安装上运行。
// before
const [ id ] = useState(uniqueId('myprefix-'))
// after
const [ id ] = useState(() => uniqueId('myprefix-'))
您可以使用诸如node-uuid 之类的库来确保您获得唯一的 ID。
安装使用：
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>
);
}
}
希望这对任何寻求通用/同构解决方案的人都有帮助，因为校验和问题首先是导致我来到这里的原因。
如上所述，我创建了一个简单的实用程序来顺序创建一个新的 id。由于 ID 在服务器上不断增加，而在客户端从 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 范围。在客户端它没有（也不应该）有任何影响。