道具不匹配服务器/客户端，如何生成持久的唯一ID？答案

【问题标题】：Prop mismatch server/client, how to generate a unique ID that persists?道具不匹配服务器/客户端，如何生成持久的唯一ID？
【发布时间】：2018-05-08 10:20:18
【问题描述】：

我正在使用带有服务器渲染的 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"

【问题讨论】：

标签： javascript reactjs reactjs.net

【解决方案1】：

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

【讨论】：

将 ID 作为 prop 传递将导致相同的行为，只要 ID 是从 react 组件（在本例中为父组件）中生成的。我设法解决它的唯一方法是从最初开始渲染组件的 Razor 视图中将 ID 作为道具传递。也许这就是你的意思？如果可能的话，我想从 javascript 中解决这个问题！
@MathiasMothander 我认为在处理 SSR 时不应该使用随机 ID。如果您的组件采用 title="My component" / title="My second component" 之类的属性 - 这足以使它们独一无二 - 使用 title（在您的情况下为 whatever）属性作为键或从中生成哈希码。
Gotcha，但是这个组件不会真正将任何独特的东西作为道具，这就是为什么我试图为它生成一个随机 ID。我想我可以介绍一些独特的东西——但那只是为了解决这个 ID 问题，没有别的。

【解决方案2】：

我想出了一个解决办法：

为标签和输入元素创建一个引用。在 componentDidMount() 生命周期函数中，用生成的值将“id”和“htmlFor”分配给这些元素。

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

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

【讨论】：

在通用组件挂载后更新 DOM 可能不是最好的主意。