内部のカスタム要素内から属性を変更する

Question

custom elementがReact内で使用されています。 Reactから要素の属性を変更できるようにしたい。私はまた、要素自体の内部から同じ属性を変更できるようにしたい。残念ながら、要素が独自の属性を変更すると、Reactの仮想DOMがその属性が変更されたことに気づかずに関係すると思われるいくつかの奇妙な副作用が発生します。

<my-component foo="bar"/> 

そしてmy-componentは、要素がクリックされたときに、barからのfooの値を変更します、ということの内部のロジックを持っている：私たちは次のことを返す関数をレンダリングリアクトしていると仮定し、説明するために

unicorn。この時点までのすべてが期待通りに機能します。問題は、次のレンダリングサイクルでfooがbarに戻されていないことです。 I fooをbarに設定します。

私の推測では、それが仮想のDOMを反応させるのであるキャッシュされた値としてbarを、したがって、barに戻ってそれを設定しようとしない（それがunicornに変更されている気付いていません）があります。

1. 私の理解は正しいですか？
2. どうすればfooの値が次のレンダリングサイクルでbarに戻されますか？

Answer 1

仮想DOMについては正しいですか。必要なように動作させるには、カスタム要素をサポートする方法で記述する必要があります。

あなたが入力のonChangeにハンドラをバインドし、いずれかの仮想DOMを更新するvlaueへの変更を阻止するためにevent.preventDefault()を呼び出し、または背面<input>に新しい値を渡すcontrolling an <input>、と等価であると考えます。

このため、カスタム要素は、同様のイベントハンドラをサポートする必要があります。