當我添加一個帶有反應的標籤時,其父元素已經升級。所以調用upgradElement不起作用,添加的選項卡不起作用。 什麼解決方案,使用容器重新創建所有選項卡並升級它?在這種情況下,React只更新DOM組件,我需要卸載組件?動態添加標籤upgradeElement
回答
如何中的特定成分
componentDidUpdate() {
componentHandler.upgradeElement(this.refs.myElement);
//or componentHandler.upgradeDom('MaterialTabs');
}
EDIT 1凸片部件
componentDidUpdate() {
componentHandler.upgradeDom();
}
newTab() {
this.setState({
newtab: 1
});
}
render() {
return (<div className="mdl-layout mdl-js-layout mdl-layout--fixed-header" key={this.state.newtab}>
<button onClick={this.newTab.bind(this)}>Add Tab</button>
<header className="mdl-layout__header">
<div className="mdl-layout__tab-bar mdl-js-ripple-effect">
<Link to="/tabtest" hash="#scroll-tab-1" className="mdl-layout__tab is-active">Tab 1</Link>
<Link to="/tabtest" hash="#scroll-tab-2" className="mdl-layout__tab">Tab 2</Link>
{ this.state.newtab ?
<Link to="/tabtest" hash="#scroll-tab-3" className="mdl-layout__tab">Tab 3</Link> : null}
</div>
</header>
<div className="mdl-layout__content">
<section className="mdl-layout__tab-panel is-active" id="scroll-tab-1">
<div className="page-content">Tab 1</div>
</section>
<section className="mdl-layout__tab-panel" id="scroll-tab-2">
<div className="page-content">Tab 2</div>
</section>
{ this.state.newtab ? <section className="mdl-layout__tab-panel" id="scroll-tab-3">
<div className="page-content">Tab 2</div>
</section> : null}
</div>
</div>);
}
的componentDidUpdate相位主叫componentHandler.upgradeElement()或componentHandler.upgradeDom()
我做了一些測試,可以重現問題。什麼幫助將關鍵屬性放在選項卡組件的根元素上。當添加一個新標籤時,這個鍵必須改變,反應會丟棄組件並完全重新渲染。通過這種方式,所有material-design-lite屬性都會丟失,並且在調用upgradeDom或upgradeElement之後它就可以工作。
從https://facebook.github.io/react/docs/component-api.html。
forceUpdate
無效forceUpdate( [回調函數] )
默認情況下,當你的組件的狀態或道具的變化,您的組件將重新呈現。但是,如果這些變化隱式地改變(例如:對象內部的數據改變而不改變對象本身),或者如果render()方法依賴於其他數據,則可以通過調用來告訴React它需要重新運行render強制性升級()。
調用forceUpdate()將導致在組件上調用render(),跳過shouldComponentUpdate()。這將觸發子組件的正常生命週期方法,包括每個子組件的shouldComponentUpdate()方法。如果標記更改,React仍然只會更新DOM。
通常情況下,您應該儘量避免使用forceUpdate(),只能從render.props和this.state中讀取render()。這使得你的組件「純粹」,你的應用程序變得更簡單,更高效。
我同意但反應更新dom,但MDL已升級它,所以新的選項卡呈現,但MDL選項卡容器已標誌已升級,因此新選項卡不工作。我需要將所有組件dom重新創建爲其初始狀態(在MDL升級之前)。 –
我想我需要在componentWillUnmount函數中降級DOM。 MDL有這個功能嗎? –
我不使用MDL,所以不知道。 –
爲了突出基督教斯氏的回答的最重要的部分:
給周邊.mdl-js-tabs
div元素的標籤數爲key
屬性。
無論何時添加選項卡,該鍵都會改變,React將重新渲染整個選項卡組件。這將隨後進行MDL升級。
- 1. 動態添加標籤
- 2. ExtJS動態添加標籤
- 3. QML動態添加標籤
- 4. 動態添加uib accordion標頭標籤
- 5. 如何添加動態標籤
- 6. 在IE8中動態添加html5標籤
- 7. 動態添加標籤不起作用
- 8. 添加<meta/>標籤動態
- 9. javascript無法動態添加標籤
- 10. jQuery動態添加源標籤
- 11. 使用reactjs添加動態標籤
- 12. 總理面孔動態添加標籤
- 13. C#和添加動態META標籤
- 14. 動態添加標籤來JTabbedPane的
- 15. 動態添加標籤身體
- 16. 使用php動態添加元標籤
- 17. 添加onclick動態創建li標籤
- 18. 在ASP.NET中動態添加DIV標籤
- 19. 動態添加屬性到Builder標籤
- 20. WPF:Grid中的動態標籤添加
- 21. 向telegraf輸入添加動態標籤
- 22. 添加標籤動態地在我的應用我想添加標籤的Android
- 23. jquery ui標籤動態添加標籤ID
- 24. 檢票 - 動態添加標籤而不呈現所有標籤
- 25. jQuery UI標籤動態添加標籤和內容不工作
- 26. Google條形圖標籤動態數據。如何添加標籤?
- 27. 末動態地添加標籤,另一個標籤
- 28. Select2標籤:動態添加標籤到輸入
- 29. 在d3動態餅圖上添加動態標籤
- 30. android: - 添加動態按鈕與動態標籤?
這就是我所做的,調用componentHandler.upgradeDom(),但它什麼都不做,因爲我認爲TabContainer已經升級,所以它不會深入DOM。我會嘗試升級元素的特定標籤... –
事實上,標籤元素不是可降解元素,這是可降解且已升級的div容器。所以我不知道如何強制upgradeElement。 –
好的,你必須在tabcontainer上使用forceUpdate,當你添加一個選項卡然後調用this.upgradeElement。我也會嘗試自己。 –