javascript - React - persist element across parents -
is there way avoid unmounting/remounting element when moved between parents?
i have tried applying relevant keys elements, since keys sibling-unique has little impact.
class item extends react.component { constructor(props) { super(props); console.log("a new item created"); } componentdidmount() { console.log("i mounted"); } componentwillunmount() { console.log("i unmounted"); } render() { return ( <li>item</li> ); } } class app extends react.component { constructor(props) { super(props); this.state = { itemlist: 0 }; } componentdidmount() { setinterval( this.picknewlist.bind(this), 2500); } picknewlist() { let newlist; { newlist = math.floor(math.random() * 3); } while (newlist === this.state.itemlist); console.log(`moving item ${this.state.itemlist} ${newlist}`); this.setstate({ itemlist: newlist }); } render() { const uls = [...array(3)].map((v, i) => { return ( <ul key = {i}> <li>non-item</li> {this.state.itemlist === ? <item key="item" /> : undefined} <li>non-item</li> </ul> ); }); return ( <div> {uls} </div> ); } } reactdom.render(( < app / > ), document.getelementbyid("app")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div> in specific use case looking animate movement using react-flip-move, since element unmounted/remounted every time, not registered move.
Comments
Post a Comment