Question

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

因此，我在构造函数中生成一个guid并使用它 - 除了在服务器端生成ID然后在客户端生成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

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

Answer 2

我想出了一个解决方案：

为标签和输入元素创建一个ref。在componentDidMount（）生命周期函数中，使用生成的值为这些元素分配“id”和“htmlFor”。

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

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

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

2 个答案: