OPTION标记内容中静态文本加状态值的不变冲突

Invariant Violation with static text plus state value in OPTION tag content

本文关键字：状态 冲突 文本 静态 OPTION      更新时间：2023-09-26

有人能告诉我为什么当我在SELECT标记中呈现此状态更改时，它会在React中产生错误吗。我得到一个不变违规错误。我没有看到浏览器对DOM进行任何错误提示的更改。我最终使用了dangerouslySetInnerHTML方法来实现这一点。感谢您的意见。

以下是当状态值更改时引发错误的代码：

 <select>
        <option value="0" defaultValue>Add a {this.state.filtertype}</option>
 </select>

此代码运行良好：

 <select>
        <option value="0" defaultValue>{this.state.filtertype}</option>
 </select>

将已评估的状态值作为内部html内容的静态文本在其他元素中是否正常工作？这是React错误吗？

这不是React错误，它只是对html <option>标记的更多限制。

因此，React更新DOM的方式是，它本质上将所有浮动文本节点转换为具有特定reactid的<span>标记，并且当状态/道具发生更改时，它可以很容易地找到这些项，以便在需要时进行协调和更新。

这里的问题是<option>标签不能包含任何其他标签。这是无效的HTML，它就是不起作用。因此，问题是您想要创建这样一个虚拟DOM结构：

<select>
    <option>
        <span>Add a</span>
        <span>filterType</span> <!-- React only wants to change this on update -->
    </option>
</select>

当状态更新时，React只想简单地查找只包含状态的span id并更新它。但是，你的浏览器会创建这样的东西：

<select>
    <option>Add a filterType</option>
</select>

当React进行更新时，它会查看<option>，并想知道<span>去了哪里（因为它只想更改filterState）。相反，它一无所获，并抛出一个错误。

如何解决？最简单的方法就是在你的render:中，在你的状态前面加一个"Adda"

<select>
    <option value="0" defaultValue>{"Add a " + this.state.filterType}</option>
</select>
相关文章：