修改React中自定義元素內的屬性

我在React中使用custom element。我希望能夠從React中更改元素的屬性。我也希望能夠從元素內部改變相同的屬性。不幸的是，當元素更改自己的屬性時，這會導致一些奇怪的副作用，我認爲這與React的虛擬DOM不知道該屬性已更改有關。修改React中自定義元素內的屬性

爲了說明，假設我們有一個陣營呈現函數返回如下：

<my-component foo="bar"/>

而且my-component有邏輯的它內部的，被點擊的元素時，會從bar改變foo的價值unicorn。到目前爲止，一切都按預期工作。問題是在下一個渲染週期中，foo未被設置爲bar。我想要foo被設置回bar。

我的猜測是，陣營的虛擬DOM有bar的緩存值（它不知道它已更改爲unicorn），因此不會嘗試將其設置回bar。

2016-03-30 Aaronius

如果屬性或子項沒有變化，React將不會觸及''。 – thangngoc89

自定義元素需要是真實的，只有在反應良好的情況下才能發揮作用，或者您可以讓元素使用React的更新週期（1-way）或類似於redux。總之，不要在沒有React的情況下更改HTML。 – dandavis

聲音就像你有條硬編碼（'foo =「bar」'被硬編碼）在某處？也許可以考慮一個架構框架，對運行和管理狀態做出反應。我個人喜歡Redux。 – ajmajmajma

你對虛擬DOM是正確的。爲了使它按照你想要的方式行事，自定義元素需要以支持它的方式編寫。這

想象的那樣等同於controlling an <input>，在那裏你會綁定一個處理程序，將輸入的onChange，要麼調用event.preventDefault()阻止到vlaue任何改變，或通過新的值回<input>更新虛擬DOM。

因此，爲了使其工作，自定義元素需要支持類似的事件處理程序。

2016-03-30 22:37:13

回答