道具不匹配服务器/客户端，如何生成一个持续存在的唯一 ID?

Question

我正在使用服务器渲染的 ReactJS.net。我想制作一个简单的组件，它输出一个标签和一个输入，其中标签通过 htmlFor 属性引用输入。由于此组件可以在同一页面上多次使用，因此我需要它为组件的每个实例提供一个唯一的ID。

因此，我在构造函数中生成一个 guid 并使用它 - 它工作正常，除了在服务器端和客户端生成 ID 会导致值不匹配。

如何解决这种不匹配？

示例代码：

interface IProps { whatever:string }
export default class Test extends React.Component<IProps> {
private _guid: string;
constructor(props: IProps) {
super(props);
this._guid = Utils.getGuid(); // generates a new guid
}
render(): JSX.Element {
return (
<div>
<label htmlFor={this._guid}A nice label</label>
<input id={this._guid} type="text" />
</div>
);
}
}

代码将运行并正常工作，但会生成警告：

警告：道具htmlFor不匹配。服务器："87d61dbe-b2a8-47bd-b299- c6e80445f626" 客户端："f0297b42-7781-48a4-9904-75b8fd2d1140">

Answer 1

您必须根据传递给组件的 props 构建一个 ID - 在这种情况下，您可以使用whatever字符串创建哈希代码。

Answer 2

我想出了一个解决方案：

为标签和输入元素创建引用。在 componentDidMount(( 生命周期函数中，使用生成的值为这些元素分配"id"和"htmlFor"。

componentDidMount() {
this._labelRef.htmlFor = this._guid;
this._inputRef.id = this._guid;
}

现在this._guid服务器到客户端仍然是两个不同的值，但 React 不会警告它，因为我是在 Mount 之后应用这些值的。