1

有人可以告诉我为什么当我在 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 内容的静态文本在其他元素中是否正常工作？这是一个反应错误吗？

4

1 回答 1

3

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

所以 React 如何更新 DOM 本质上是将所有浮动文本节点转换为<span>具有特定 reactid 的标签，并且当 state/prop 发生更改时，它可以轻松找到这些项目以在需要时进行协调和更新。

这里的问题是<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：

<select>
    <option value="0" defaultValue>{"Add a " + this.state.filterType}</option>
</select>
于 2014-10-22T18:22:40.177 回答