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 コンテンツとして評価された状態値を持つ静的テキストは、他の要素で正常に機能しますか? これはReactのバグですか？

4

1 に答える 1

3

これは React のバグではなく、単なる html<option>タグの制限です。

したがって、React が DOM を更新する方法は、基本的にすべてのフローティング テキスト ノードを<span>特定の reactid を持つタグに変換することです。状態/小道具が変更されると、それらの項目を簡単に見つけて調整し、必要に応じて更新できます。

ここでの問題は、<option>タグに他のタグを含めることができないことです。これは無効な HTML であり、機能しません。したがって、問題は、次のような仮想 DOM 構造を作成したいということです。

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

状態が更新されると、React は単に状態を含むスパン ID を探して更新したいと考えています。ただし、代わりに、ブラウザは次のようなものを作成します。

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

React が更新に行くとき、それを見て、<option>どこに行ったのか疑問に思っています<span>(filterState を変更したいだけなので)。代わりに、何も検出されず、エラーがスローされます。

それを解決する方法は？最も簡単な方法は、次のように状態の前に「Add a」を付けることですrender。

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